Grijze tekst op wit ziet er prima uit op de monitor van de ontwerper, en dan kan een gebruiker met een dof telefoonscherm hem niet lezen. Een kleurcontrastcontrole geeft het getal dat de discussie beslecht. Voer een tekstkleur en een achtergrondkleur in en de verhouding verschijnt terwijl je typt, bijvoorbeeld 4,47:1 voor het voorbeeldpaar #777777 op wit.
De vijf voldoet/voldoet-niet-rijen lezen
Elke rij vergelijkt je verhouding met één WCAG 2.x-minimum. AA normale tekst heeft 4,5 nodig, AA grote tekst 3, AAA normale tekst 7 en AAA grote tekst 4,5. De vijfde rij, interfacecomponenten en afbeeldingen, heeft 3 nodig. Grote tekst betekent 18 pt (24 px) of groter, of 14 pt (18,67 px) of groter in vet. Het voorbeeldvak toont normale tekst, grote tekst en grote vette tekst in jouw kleuren.
Waarom 4,496 faalt
De tool kapt de verhouding na twee decimalen af. Hij rondt niet af. Dus 4,496 verschijnt als 4,49:1 en haalt de grens van 4,5 niet. Afronden zou 4,50 tonen en een paar dat niet voldoet laten passeren. Het voorbeeldpaar laat dit zien: de echte waarde is ongeveer 4,478, dus je ziet 4,47 en niet 4,48.
Een falend paar herstellen in vier stappen
- Typ of kies de Tekstkleur. Het tekstveld en de kleurkiezer blijven synchroon.
- Typ of kies de Achtergrondkleur. Gebruik
#rgb,#rrggbbofrgb(r, g, b). Al het andere krijgt een foutmelding in de regel. - Lees de verhouding en de rijen af. Faalt AA voor normale tekst, dan toont een vak de dichtstbijzijnde tekstkleur die 4,5:1 haalt.
- Druk op Deze kleur gebruiken om hem toe te passen, of op Kleuren omwisselen om lichte tekst op een donkere achtergrond te testen.
Hoe de dichtstbijzijnde kleur wordt gevonden
De suggestie behoudt de tint en de verzadiging van je tekstkleur. Alleen de lichtheid verandert, in stappen van 0,1 procentpunt. De tool zoekt donkerder en lichter en toont het dichtstbijzijnde resultaat. Voor #777777 op wit ligt het antwoord dicht bij #767676, het lichtste grijs dat op wit voldoet.
Wat de controle niet kan beoordelen
Hij vergelijkt twee dekkende kleuren. Kleuren met alfa, zoals rgba() of een hexwaarde van 8 cijfers, worden niet geaccepteerd. Tekst over een foto of een kleurovergang heeft geen enkele achtergrond, dus controleer zelf de slechtste plek. De tool kent ook de lettergrootte of het gewicht dat je echt gebruikt niet. De rijen voor grote tekst vertellen alleen wat zou gelden als de tekst groot was.
Wat er met je kleuren gebeurt
De berekening draait in de pagina. Er wordt geen verzoek verstuurd en de tool slaat de kleuren niet op. Je kunt dat controleren in het netwerkpaneel van de ontwikkelaarstools van je browser.