Kleurcontrast checker

De kleurcontrastcontrole meet de contrastverhouding tussen een voorgrond (tekst)kleur en een achtergrondkleur en vertelt u of dat paar voldoet aan de richtlijnen voor toegankelijkheid van webcontent. Het rapporteert een enkel getal tussen 1:1 en 21:1 en verdeelt het tegen de WCAG 2.2-drempels voor AA en AAA bij zowel normale als grote tekstgroottes, plus de afzonderlijke 3:1-drempel voor gebruikersinterfacecomponenten en afbeeldingen.

Contrast is het verschil in relatieve luminantie tussen twee kleuren, niet alleen hoe verschillend ze eruit zien. Twee kleuren kunnen duidelijk aanvoelen terwijl ze nog steeds falen voor lezers met een slecht zicht, een tekort aan kleurenzicht of iedereen die een telefoon gebruikt in fel zonlicht. De verhouding wordt berekend met de exacte sRGB-relatieve-luminantieformule gedefinieerd door WCAG, dus het resultaat komt overeen met welke audittools en gebruikers van schermlezers er ervaren in plaats van een ruwe visuele schatting.

Alles draait in uw browser. Typ of plak kleuren als Hex, RGB, HSL of een CSS-sleutelwoord, bekijk een live tekstvoorbeeld-update en als een paar mislukt, kunt u een voorgestelde kleur toepassen die voorbij is. Er wordt niets geüpload, er is geen aanmelding en de tool blijft offline werken zodra de pagina is geladen.

De WCAG 2 contrastformule is een verhouding van relatieve luminantie, en de drempels zijn waar toegankelijkheidsaudits en de meeste wettelijke vereisten aan worden afgemeten, dus het is het juiste getal om te ontwerpen. Het is ook bekend dat het onvolmaakt is: het kan genereus zijn om tekst op donkere achtergronden te belichten en hard voor sommige middentoonparen, daarom bestaat het opvolgeralgoritme, APCA, en wordt uitgeprobeerd voor toekomstige versies. Grote tekst heeft een lagere balk, en grote middelen 18pt, of 14pt vetgedrukt, wat ongeveer 24px en 18,66px is. Niet-tekstelementen worden afzonderlijk behandeld door 1.4.11 om 3:1, en dat is de meest nodig, vaak, en de invoerpictogrammen, en de invoer, kan het niet-pictogrammen, en de invoer, en de invoerpictogrammen, en de meeste invoerpictogrammen, en de invoerpictogrammen kunnen nog steeds niet-pictogrammen.