Webové komponenty Farby

Vždy používajte farebnú paletu ID-SK.

Obsah:

Farebný kontrast

Pomerová hodnota farebného kontrastu pre text a interaktívne prvky by mala byť aspoň 4,5:1 ako odporúča W3C. Na to, aby vaša služba spĺňala tento štandard, je potrebné vždy otestovať kontrast všetkých použitých prvkov.

Sass premenné

Odporúčame používať nasledovné Sass premenné pre prípad, že farby bude nutné v budúcnosti aktualizovať. Nájdete ich v súbore colours.scss.

Text

  • #0B0C0C
  • $text-colour
  • #6F777B
  • $secondary-text-colour
  • #FFFFFF
  • $page-colour

Textové odkazy

  • #005ea5
  • $link-colour
  • #2b8cc4
  • $link-hover-colour
  • #4c2c92
  • $link-visited-colour

Pozadie

  • #BFC1C3
  • $border-colour
  • #DEE0E2
  • $panel-colour
  • #F8F8F8
  • $highlight-colour

Tlačidlá

  • #00823B
  • $button-colour
  • #006435
  • $green (vznášacia farba)

Aktívny stav

  • #FFBF47
  • $focus-colour

Farby stavu

  • #005ea5
  • $govuk-blue

Označenie novej a textovacej verzie služby

  • #B10E1E
  • $error-colour

Chybové oznamy

Paleta odtieňov šedej

  • #0B0C0C
  • $black
  • #6F777B
  • $grey-1
  • #BFC1C3
  • $grey-2
  • #DEE0E2
  • $grey-3
  • #F8F8F8
  • $grey-4

Rozšírená paleta

Nočná modrá

  • #2e358b
  • $purple

Modrofialová

  • #6f72af
  • $mauve

Purpurová

  • #912b88
  • $fuschia

Tmavá ružová

  • #d53880
  • $pink

Ružová

  • #f499be
  • $baby-pink

Karmínová červená

  • #b10e1e
  • $red

Červená

  • #df3034
  • $mellow-red

Oranžová

  • #f47738
  • $orange

Hnedobéžová

  • #b58840
  • $brown

Žltá

  • #ffbf47
  • $yellow

Listová zelená

  • #006435
  • $green

Trávová zelená

  • #85994b
  • $grass-green

Tyrkysová

  • #28a197
  • $turquoise

Svetlomodrá

  • #2b8cc4
  • $light-blue

Modrá

  • #005ea5
  • $govuk-blue

Príklady

Stránka s potvrdením

Pri použití bieleho textu na pozadí tyrkysovej farby sa uistite, že približná minimálna veľkosť písma je 24 pixelov (normálny rez písma) alebo 19 pixelov tučného písma, pričom veľkosť sa uvádza v relatívnych jednotkách a nie v jednotkách pixelov. Týmto splníte požiadavku na dostatočný farebný kontrast.

Žiadosť ukončená

Vaše referenčné číslo je
HDJ2123F

Poslali sme vám email s potvrdením.

Čo teraz?

Poslali sme vašu žiadosť na volebný úrad.

Budú Vás kontaktovať s cieľom potvrdenia vašej registrácie alebo Vás požiadajú o viac informácií.