Kleurcontrast controleren
Controleer het contrast tussen een tekstkleur en een achtergrondkleur volgens WCAG 2 en APCA. De checker berekent de WCAG 2-contrastverhouding op basis van relatieve luminantie, geeft aan of AA en AAA slagen of falen voor normale en grote tekst en voor UI afbeeldingen, en voegt de APCA-lichtheidscontrastwaarde toe met uitleg waarvoor die waarde geschikt is. Gemaakt voor ontwerpers en ontwikkelaars die toegankelijke interfaces bouwen.
Veelgestelde vragen
Wat betekenen de WCAG-niveaus?
Niveau AA vereist 4.5:1 voor normale tekst en 3:1 voor grote tekst (succescriterium 1.4.3); niveau AAA vereist 7:1 en 4.5:1 (1.4.6). Onderdelen van de gebruikersinterface en betekenisvolle afbeeldingen vereisen 3:1 ten opzichte van aangrenzende kleuren (1.4.11). De checker geeft voor elk van deze vijf drempelwaarden aan of eraan wordt voldaan.
Wat wordt als grote tekst beschouwd?
WCAG definieert grote tekst als minimaal 18 punt in normaal gewicht, ongeveer 24 CSS pixels, of minimaal 14 punt vet, ongeveer 18.66 CSS pixels. Alles wat kleiner is, geldt als normale tekst en vereist de hogere verhouding.
Waarom voldoet een verhouding van 4.499:1 niet aan AA?
WCAG-drempelwaarden zijn exact. Een verhouding die afgerond 4.5 zou zijn maar daaronder ligt, voldoet dus niet. De checker vergelijkt de niet-afgeronde verhouding en toont deze afgekapt op twee decimalen, zodat de weergegeven waarde nooit gunstiger lijkt dan de werkelijke.
Wat is APCA?
Het Accessible Perceptual Contrast Algorithm is de contrastmethode die is ontwikkeld voor de conceptversies van WCAG 3. Het modelleert waargenomen lichtheidscontrast, behandelt tekst en achtergrond verschillend en geeft een lichtheidscontrastwaarde, Lc, van ongeveer -108 tot 106. Het maakt nog geen deel uit van een gepubliceerde WCAG-standaard. Gebruik daarom de WCAG 2-resultaten om aan de eisen te voldoen en APCA als aanvullende controle.
Waarom is de APCA-waarde soms negatief?
APCA houdt rekening met de polariteit: positieve waarden betekenen donkere tekst op een lichte achtergrond, negatieve waarden lichte tekst op een donkere achtergrond. De richtlijnen gebruiken de absolute waarde, dus Lc -75 en Lc 75 vallen in dezelfde categorie.
Hoe worden de APCA-richtlijncategorieën bepaald?
Ze volgen de eenvoudige APCA-bronsmodus: Lc 90 heeft de voorkeur voor broodtekst, Lc 75 is het minimum voor broodtekst, Lc 60 voor andere inhoudstekst, Lc 45 voor koppen en grote tekst, Lc 30 voor tekst die kort leesbaar moet zijn, zoals plaatsaanduidingen, en Lc 15 voor niet-tekstelementen. Lettergrootte en gewicht blijven van belang, dus beschouw deze categorieën als uitgangspunten en niet als een definitief oordeel.
Welke APCA-versie is geïmplementeerd?
De APCA-W3-constanten van versie 0.0.98 G, revisie 4g, met de eenvoudige exponent 2.4 op sRGB-kanalen, de zachte begrenzing van zwart en de afkapping bij laag contrast. Zwarte tekst op wit geeft ongeveer Lc 106.0 en witte tekst op zwart ongeveer Lc -107.9, overeenkomstig de referentie-implementatie.
Welke kleurformaten kan ik invoeren?
Hex-codes met of zonder #, CSS kleurnamen, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color()-kleurruimten zoals display-p3 en cmyk(). Kleuren buiten sRGB worden eerst naar sRGB omgezet, omdat beide formules zijn gedefinieerd voor sRGB-schermkleuren.
Hoe worden transparante kleuren verwerkt?
Een semi-transparante tekstkleur wordt vóór de meting over de achtergrond gemengd, zoals een browser die weergeeft. Een semi-transparante achtergrond wordt eerst over wit gemengd. Het resultaat toont de ondoorzichtige tekst- en achtergrondkleuren die daadwerkelijk zijn vergeleken.
Maakt de volgorde van de twee kleuren uit?
Voor WCAG 2 maakt dit niet uit, omdat de verhouding tussen de hogere en lagere luminantie in beide volgordes gelijk is. Voor APCA maakt het wel uit, omdat tekst en achtergrond verschillend worden gewogen. Voer daarom de tekstkleur in het eerste veld in en de achtergrondkleur in het tweede.