Contrast Checker
WCAG contrast check
WCAG contrast check Wordt lokaal uitgevoerd in uw browser
The quick brown fox
Small body text at 14px
| Normal text (AA) | needs 4.5:1 | Pass |
| Normal text (AAA) | needs 7:1 | Pass |
| Large text 18pt+ (AA) | needs 3:1 | Pass |
| Large text 18pt+ (AAA) | needs 4.5:1 | Pass |
| UI components and graphics (AA) | needs 3:1 | Pass |
Text: #1a1a1a Background: #ffffff Contrast ratio: 17.40:1 Normal text (AA) (needs 4.5:1): Pass Normal text (AAA) (needs 7:1): Pass Large text 18pt+ (AA) (needs 3:1): Pass Large text 18pt+ (AAA) (needs 4.5:1): Pass UI components and graphics (AA) (needs 3:1): Pass
About the
De Contrast Checker meet de contrastverhouding tussen een tekstkleur en een achtergrondkleur met behulp van de WCAG-luminantieformule, en vertelt u welke toegankelijkheidsniveaus dat paar doorstaat. Dit is de controle die bepaalt of de hoofdtekst daadwerkelijk leesbaar is: een verhouding van 4,5 op 1 is het minimum voor normale tekst, 3 op 1 voor grote tekst en voor interfacegrenzen, en 7 op 1 voor verbeterde compliance. Het beoordelen van het contrast met het oog is onbetrouwbaar, omdat het oog veel gevoeliger is voor groen dan voor blauw. Daarom kan een geel dat er helder uitziet en een blauw dat er donker uitziet vrijwel identiek scoren.
Where people use the
- Controleren of de hoofdtekst op een gekleurde achtergrond voldoet aan AA.
- Kiezen tussen zwarte en witte tekst voor een knopkleur.
- Een bestaand palet controleren vóór een herontwerp.
- Het documenteren van een toegankelijkheidsbeslissing in een ticket.
How to use the
- 1
Stel de tekstkleur in
Typ een hexadecimale waarde, zoals 1a1a1a, of gebruik de kleurkiezer. Afkortingen van drie cijfers, zoals f0a, worden geaccepteerd.
- 2
Stel de achtergrondkleur in
Hetzelfde voor de achtergrond. Het voorbeeld wordt bijgewerkt als u een van beide wijzigt.
- 3
Lees de verhouding
Het getal loopt van 1:1, identieke kleuren, tot 21:1, zwart op wit. Hoger betekent beter leesbaar.
- 4
Controleer het niveau dat u nodig heeft
Normale hoofdtekst heeft 4,5 op 1 nodig voor AA en 7 op 1 voor AAA. Koppen met een vetpercentage van 18 of 14 punten en UI-randen hebben een verhouding van 3 op 1 nodig.
- 5
Kijk zowel naar het voorbeeld als naar het nummer
Een paar kan papier doorgeven en er toch slecht uitzien op een klein formaat of op een scherm van lage kwaliteit. Als het er moeilijk uitziet om te lezen, is het ook moeilijk om te lezen.
Tips en beste praktijken
- Maak een kleur donkerder voor tekst, en behoud de helderdere versie voor vullingen.
- Controleer het kleinste formaat waarin de tekst daadwerkelijk zal worden gebruikt.
- Randen en pictogrammen hebben ook 3 op 1 nodig, niet alleen tekst.
Veelgestelde vragen
Wat is de formule voor de contrastverhouding?
Elke kleur wordt na gammacorrectie omgezet naar relatieve luminantie met behulp van de standaardgewichten, 0,2126 voor rood, 0,7152 voor groen en 0,0722 voor blauw. De verhouding is dan de lichtere luminantie plus 0,05 gedeeld door de donkerdere plus 0,05. Het resultaat varieert van 1:1 tot 21:1.
Waarom mislukt mijn merkkleur?
Omdat de meeste verzadigde middentoonkleuren niet 4,5 tegen 1 kunnen bereiken tegen wit. De gebruikelijke oplossing is om de kleur donkerder te maken voor tekstgebruik en de helderdere versie te behouden voor grote vullingen, wat precies is wat de meeste ontwerpsystemen doen met hun primaire kleur.
Is het doorgeven van de ratio voldoende om toegankelijk te zijn?
Het is noodzakelijk maar niet voldoende. Zeer grote of zeer kleine tekst, dunne lettertypes, tekst over afbeeldingen en bepaalde vormen van kleurwaarneming hebben allemaal invloed op de leesbaarheid buiten de verhouding. Test waar mogelijk met echte gebruikers.
Maakt de richting uit, licht op donker of donker op licht?
Nee. De verhouding is symmetrisch, dus zwart op wit en wit op zwart scoren beide 21:1. Wat in de praktijk verschilt, is verblinding en waargenomen gewicht, wat eerder een ontwerpoordeel is dan een conformiteitsoordeel.
Wat telt als grote tekst?
In WCAG-termen: 18pt of groter, of 14pt of groter indien vetgedrukt. In CSS-pixels is dat ongeveer 24 px, of ongeveer 18,66 px als het vetgedrukt is.
Waar vindt de berekening plaats?
Geheel in uw browser. Er wordt niets geüpload, dus je kunt kleuren controleren vanuit een merkrichtlijn die nog niet openbaar is.