Farvekontrast til interface design

Der er anslået 285 millioner mennesker i verden, der er svagsynede. Dette nummer inkluderer alle fra juridisk blinde til personer med mindre end 20/20 syn.

Denne korte guide, skrevet under oprettelsen af ​​en kontrast MacOS-app, hjælper dig med at nå de tilgængelighedsstandarder, der er skitseret i WCAG 2.0, specifikt med forgrunds- og baggrundsfarve, når det kommer til tekst på digitale skærme.

TL; DR

  • Mislykkedes - Din tekst har ikke tilstrækkelig kontrast til baggrunden. Du vil sandsynligvis gøre det mørkere. Dette er en score på mindre end 3.0.
  • AA Large - Den mindste acceptable mængde kontrast for typestørrelser på 18px og større. Dette er en score på mindst 3.0.
  • AA - Dette er det søde sted for tekststørrelser under ~ 18pt. Dette er en score på mindst 4,5.
  • AAA - Dette er forbedret kontrast med en score på mindst 7,0. Tænk på længerevarende artikler, der vil blive læst i en betydelig periode.

Dekorative elementer eller tekst, der er en del af et logo eller mærkenavn, har ingen minimumskrav til kontrast.

Der er andre faktorer, der skal overvejes for at overholde AA- og AAA-standarderne, men dette får dig en god start.

Resultat og forhold

Der er en ligning leveret af WCAG (Retningslinjer for webindholdstilgængelighed), der bestemmer disse to værdier.

  1. Scoren
  2. Radioen

Ligningen udsender et tal mellem 1 og 21, hvor 21 er den højeste mængde kontrast - tænk sort tekst og en hvid baggrund - og 1 er ingen kontrast - hvid på hvidt.

Kontrastens output mellem to farver falder et sted på spektret mellem 1–21. Det er her scoringerne stammer fra.

Der er teknisk set 5 scoringer.

  1. AAA
  2. AAA Stor
  3. AA
  4. AA Stor
  5. Svigte

AAA

AAA betyder, at din tekst har et kontrastforhold på mindst 7,0. For eksempel 595959 tekst på ffffff-baggrund og vice versa.

Bemærk, at for at opnå en ægte AAA-klassificering angiver også afsnit 1.4.8.1 i WCAG, at "Forgrund og baggrundsfarver kan vælges af brugeren."

Så medmindre du også planlægger at oprette denne funktionalitet på dit websted eller din app, er der virkelig ingen grund til at skyde for højere end AA, efter min ydmyge mening. Der er selvfølgelig advarsler. Din kropskopi kan se pæn ud og være den mest læsbare, hvis du rammer en AAA-score, så tag dette råd med et salt salt.

Denne score er afledt for personer med lav 20/80 syn. Denne synsstyrke kan ofte ikke korrigeres med briller osv.

Sidebesked, 20/200, er juridisk blind.

ISO 9241–3 Ergonomiske krav til kontorarbejde med visuelle displayterminaler (VDT'er) - Del 3: Krav til visuel visning. Ændring 1.

AAA Stor

AAA Large betyder, at din store tekst har et kontrastforhold på 4,5 eller højere, hvilket er den samme score som AA, hvorfor du ikke ser AAA Large som et synligt partitur i appen.

WCAG beskriver 14pt fedt og 18pt som "store" størrelser. Dette svarer groft til 18,5px fed og 24px @ 1x. Dette er en tilnærmelse, da brevformatstørrelser kan variere meget mellem skrifttyper.

Hvis du aldrig har kontrolleret dine kontrastresultater før, vil du blive chokeret over, hvor mørkt du har brug for at ramme AA i små størrelser. Jeg opfordrer dig til at presse igennem - dine brugere vil sandsynligvis ikke takke dig, men de vil nyde læsbar tekst i dine designs. Det er bare den rigtige ting at gøre.

AA

AA betyder, at din tekst har et kontrastforhold på mindst 4,5 eller højere. F.eks. 757777 tekst på ffffff-baggrund og vice versa.

Der er empirisk bevis for, at synsskarphed på 20/40 er forbundet med et kontrastfølsomhedstab på omtrent 1,5, hvilket er, hvor 4,5-score er afledt.

Gittings, NS og Fozard, JL (1986). Aldersrelaterede ændringer i synsskarphed. Eksperimentel gerontologi, 21 (4-5), 423–433.
ANSI-HFES-100-1988. American National Standard for Human Factors Engineering of Visual Display Terminal Workstations, Afsnit 6, s. 17–20.

AA Large (AA +)

AA Large betyder, at din tekst har et kontrastforhold på mindst 3,0. For eksempel 949595 tekst på en ffffff-baggrund.

Dette er det minimumsniveau, der anbefales af ISO-9241–3 og ANSI-HFES-100–1988 til standardtekst og normal syn, og det er her WCAG udledte denne score.

Vi tog beslutningen om at forkorte Large til + i appen, så hver score ville være ens i karakterlængde og ikke påvirke den faste bredde på grænsefladen.

SVIGTE

Fejl betyder, at din tekst har et kontrastforhold på 2,9 eller lavere. Dette gælder ikke for logoer, tekst i logoer og andre dekorative elementer.

Ofte kan svigtede scoringer synes at fungere pænt inden for rammerne af en statisk designgennemgang. Men i forbindelse med brug af den virkelige verden kan disse svigtede scoringer forårsage alvorlige problemer for brugbarheden af ​​din interface.

Hvad med mobilapps og deres store skarpe nethindeskærme?

Der er et arbejdsudkast til WCAG Mobile-retningslinjerne, der siger ...

Det er mere sandsynligt, at mobile enheder end desktop / bærbare enheder bruges i forskellige miljøer, herunder udendørs, hvor blænding fra solen eller andre stærke lyskilder er mere sandsynlig. Dette scenarie øger vigtigheden af ​​brug af god kontrast for alle brugere og kan blande de udfordringer, som brugere med lavt syn har adgang til indhold med dårlig kontrast på mobile enheder. ”

Så selvom det sandsynligvis er lettere at se lysere tekst på skærme i høj opløsning i et kontrolleret miljø, er brugen af ​​mobil til utroligt uforudsigelig at risikere at blive superlys med tekst. Direkte sollys, mørke værelser og meget mere påvirker markant skærmen på mobilskærme.

Mere end bare kontrast

Der er meget mere tilgængelighed end bare farvekontrast. Her er et par uddrag fra WCAG for eksempel:

1.4.8 Visuel præsentation: Til den visuelle præsentation af tekstblokke er en mekanisme tilgængelig for at opnå følgende: (Niveau AAA) Forgrunds- og baggrundsfarver kan vælges af brugeren. Bredden er højst 80 tegn eller glyfer (40 hvis CJK). Teksten er ikke berettiget (justeret til både venstre og højre margen). Linjeafstand (førende) er mindst mellemrum mellem halvdelen og afsnit, og afsnit er mindst 1,5 gange større end linjeafstanden. Du kan ændre størrelsen på tekst uden hjælpemidler på op til 200 procent på en måde, der ikke kræver, at brugeren ruller vandret for at læse en tekstlinje i et fuldskærmsvindue.

Du kan se, at din app eller dit websted skal tillade valg af forgrunds- og baggrundsfarver af brugeren for at ramme en AAA-vurdering. Så selvom din farvekontrast er AAA, betyder det ikke, at hele dit produkt er.

Hvis du gerne vil se, hvor dybt WCAG kaninhullet går, skal du tage den røde pille.

Og hvis du gerne vil have en superduper, nem måde at kontrollere din farvekontrast lige fra din Mac-menulinje, skal du downloade Kontrast og begynde at designe bedre grænseflader. Du har måske endda det sjovt at bruge det.

Dette er også den bedste webbaserede kontrastkontrol, som jeg har fundet, hvis du er mere en webperson.

Kontrast brugt i SketchKontrast brugt i Adobe XDKontrast brugt i IllustratorKontrast anvendt med Figma

Denne guide blev oprindeligt offentliggjort på usecontrast.com/guide. Kontrast blev designet af Matt D. Smith () og udviklet af Sam Soffes.