Contrastcontrole
Kies tekst- en achtergrondkleuren om hun contrastverhouding met de WCAG AA- en AAA-drempelwaarden te controleren. Bekijk afzonderlijke resultaten voor normale en grote tekst, samen met een voorbeeld in de geselecteerde kleuren.
Wat je kunt doen
De verhouding voor twee kleuren controleren
Kies tekst- en achtergrondkleuren en bekijk hun contrastverhouding tot op twee decimalen.
AA- en AAA-drempelwaarden vergelijken
Bekijk afzonderlijke resultaten voor normale en grote tekst, met een voorbeeld in de geselecteerde kleuren.
Vergelijken met zwart en wit
Open de optionele details om de tekstkleur met zwarte en witte achtergronden te vergelijken.
Gebruiksaanwijzing
De tekstkleur invoeren
Kies HEX, RGB, HSL, HSV of CMYK en voer de tekstkleur in. Als je een kleurstaal kiest, schakelt de invoer over naar HEX.
De achtergrond kiezen
Voer een HEX-waarde van drie of zes cijfers in of gebruik de kleurkiezer. Het voorvoegsel # is optioneel.
Contrast controleren
Selecteer Contrast controleren om de verhouding, het tekstvoorbeeld en de AA-/AAA-resultaten te bekijken. Controleer opnieuw nadat je een van beide kleuren wijzigt.
Wanneer dit helpt
Lopende tekst op een achtergrond controleren
de kleuren van een pagina invoert en controleert of normale tekst aan de vereiste verhouding voldoet.
Kopkleuren vergelijken
het resultaat voor grote tekst en het voorbeeld gebruikt om een kleurenpaar voor een kop te beoordelen.
De resultaten lezen
AA- en AAA-verhoudingen
AA vereist minstens 4,5:1 voor normale tekst en 3:1 voor grote tekst. AAA vereist 7:1 voor normale tekst en 4,5:1 voor grote tekst. Resultaten gebruiken de niet-afgeronde verhouding.
Wat telt als grote tekst
Grote tekst is minstens 18 pt of 14 pt vet. In CSS is dit 24px of ongeveer 18,7px vet. Het voorbeeld gebruikt normale tekst van 16px en 24px.
Reikwijdte van de controle
Deze controle beoordeelt het tekstcontrast tussen twee ondoorzichtige sRGB-kleuren. Afbeeldingsachtergronden, alpha-overvloeiing, niet-tekstuele elementen en de conformiteit van de volledige pagina worden niet beoordeeld.
Vragen en antwoorden
Betekent een voldoende contrastverhouding dat de volledige pagina voldoet?
Dit resultaat betreft alleen het tekstcontrast van de twee geselecteerde kleuren. Beoordeel afzonderlijk of de volledige pagina aan de eisen voldoet.
Wat toont de vergelijking met zwart en wit?
De geselecteerde tekstkleur wordt afzonderlijk vergeleken met zwart en wit; de tool toont welke van de twee een hogere contrastverhouding heeft. Dit staat los van het resultaat voor de geselecteerde achtergrond.
Kan ik transparante tekst of tekst over een afbeelding controleren?
Alpha en afbeeldingsachtergronden worden niet ondersteund. Voer ondoorzichtige tekst- en achtergrondkleuren in.
Invoer en uitvoer
- Tekstkleur
- HEX-, RGB-, HSL-, HSV- of CMYK-waarden, of de kleurkiezer. CMYK is een schatting zonder ICC-profiel.
- Achtergrond
- HEX met drie of zes cijfers, of de kleurkiezer. Alpha wordt niet ondersteund.
- Resultaat
- Contrastverhouding, AA-/AAA-resultaten voor normale en grote tekst en een tekstvoorbeeld. Resultaten worden weergegeven zonder opslagoptie.