De eerste toegankelijkheidsbug die ik ooit heb verzonden, was een lichtgrijze tijdstempel op een witte kaart. Het zag er elegant uit in Figma, het zag er prima uit op mijn gekalibreerde monitor en het was volledig onzichtbaar voor een klant die e-mail op zijn telefoon las in een geparkeerde auto. Hij was niet slechtziend. Het was gewoon zonlicht. Dat enkele ondersteuningsticket leerde me iets dat de ontwerpmodel nooit zou kunnen: contrast is geen kwestie van smaak, het is een meetbare eigenschap, en als je het niet meet, verzend je gissingen.
Sindsdien heb ik de Kleurcontrast checker op Toolz.dev, bedrade contrastregels in de ontwerptokens voor WP Adminify, en meer React componenten gecontroleerd dan ik wil tellen Deze gids is de versie van die ervaring Ik wou dat iemand me had overhandigd bij de start Het legt uit wat de contrastverhouding eigenlijk is, hoe het getal wordt berekend, wat de WCAG drempels betekenen, en hoe je een falend kleurenpaar kunt repareren zonder je merkpalet weg te gooien.
tl;dr: WCAG-contrast is een verhouding van 1:1 tot 21:1 op basis van de relatieve helderheid van twee kleuren. Voor normale hoofdtekst heb je minimaal 4,5:1 nodig om AA en 7:1 te halen om AAA te passeren. Grote tekst (ongeveer 24px, of 18.66px vetgedrukt) daalt naar 3:1 voor AA en 4,5:1 voor AAA. stem- -Tekst UI zoals pictogrammen en invoergrenzen hebben 3:1 nodig. Meet elk text-on-background-paar, behandel AA als de doorlaatbalk en laat de tool een passerende kleur suggereren als je tekort komt.
Waarom is kleurcontrast zo belangrijk?
Contrast is de meest voorkomende toegankelijkheidsfout op het web. Jaar na jaar blijkt uit geautomatiseerde audits van de top miljoen startpagina's dat tekst met een lage contrast de meest voorkomende WCAG-schending is met een ruime marge. Het is ook degene die de meeste mensen treft, omdat het niet alleen om gebruikers die blind zijn geregistreerd, blind gaat. Het gaat om iedereen met een verminderd gezichtsvermogen vanaf de leeftijd, iedereen met een veel voorkomende aandoening zoals staar, iedereen die een goedkoop display gebruikt, iedereen in een lichte kamer en ieder van ons wanneer de zon op het scherm komt.
Er is ook een zakelijke invalshoek, en ik ga niet doen alsof. Toegankelijkheidswetgeving verwijst nu rechtstreeks naar WCAG in veel regio's, wat betekent dat een ontoegankelijke interface een juridische blootstelling is, niet alleen een beleefdheidsprobleem. Maar de reden dat ik erom geef, en de reden dat ik er een speciaal gereedschap voor heb gebouwd, is eenvoudiger. Tekst die mensen niet kunnen lezen is tekst die is mislukt in zijn enige taak. Een prachtige interface die niemand kan gebruiken is geen ontwerpprestatie.
De valkuil is dat onze ogen onbetrouwbare vertellers zijn. We passen ons aan onze eigen schermen aan, we weten wat de tekst moet zeggen, zodat ons brein het vult, en we kijken naar ontwerpen in ideale omstandigheden. De contrastverhouding verwijdert dat allemaal. Het geeft u een nummer dat niet om uw monitor of uw verwachtingen geeft.
Wat is precies een contrastverhouding?
De contrastverhouding is een vergelijking van de relatieve helderheid van twee kleuren: uw voorgrond (meestal tekst) en uw achtergrond. Relatieve luminantie is een maat voor hoeveel licht een kleur uitstraalt of reflecteert, gewogen voor hoe het menselijk oog rood, groen en blauw daadwerkelijk waarneemt. Groen draagt het meeste bij aan de waargenomen helderheid, het minst blauw, daarom is puur blauwe tekst op zwart zoveel moeilijker te lezen dan puur groen.
De verhouding zelf wordt door WCAG gedefinieerd als:
(L1 + 0.05) / (L2 + 0.05)
waarheen ook L1 is de relatieve helderheid van de lichtere kleur en L2 is dat van de donkere. de 0.05 Termen model Ambient Light reflecteert op het scherm, daarom bereikt de schaal nooit helemaal oneindig. Identieke kleuren produceren een verhouding van precies 1:1. Puur zwarte tekst op puur wit geeft het maximum van 21:1. Alles echt leeft tussen die twee uitersten.
Het belangrijkste om te internaliseren is dat de verhouding niet lineair is met hoe "different" twee kleuren er in de tintzin uitzien Twee kleuren kunnen enorm verschillend van tint zijn - zeg een verzadigd rood en een verzadigd groen - en toch bijna dezelfde luminantie hebben, wat ze een nachtmerrie voor leesbaarheid maakt, ook al botsen ze heftig Contrast gaat over lichtheidsverschil, niet over kleurverschil Dat is precies waarom je het niet kunt oogbollen, en waarom de Kleurcontrast checker Converteert beide kleuren naar luminantie voordat u een vergelijking maakt.
Hoe wordt het aantal eigenlijk berekend?
Als u de tool wilt begrijpen in plaats van alleen te vertrouwen, hier is de volledige pijplijn, die precies de WCAG 2.2-definities volgt.
Ten eerste wordt elk kleurenkanaal genormaliseerd van het bereik van 0-255 tot 0-1. Vervolgens wordt elk kanaal gelineariseerd om de sRGB-gammacurve ongedaan te maken. De formule past een klein lineair segment toe voor zeer donkere waarden en een vermogenscurve voor de rest:
c_linear = c / 12.92 if c <= 0.03928
c_linear = ((c + 0.055) / 1.055) ^ 2.4 otherwise
Vervolgens worden de drie gelineariseerde kanalen gecombineerd met de luminantiecoëfficiënten die de menselijke perceptie weerspiegelen:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
Die gewichten zijn niet willekeurig. Ze komen van de manier waarop de kegelcellen van het oog reageren op verschillende golflengten, en dat is de reden waarom groen domineert. Ten slotte worden de twee luminantiewaarden aangesloten op de bovenstaande verhoudingsformule, met de lichtere bovenaan.
Er is één subtiliteit die mensen op de been brengt, en het is transparantie. Een contrastverhouding is alleen zinvol tussen twee ondoorzichtige kleuren, omdat een semi-transparante kleur's echte uiterlijk afhangt van wat er achter zit. Als uw tekstkleur een alfawaarde heeft, kunt u deze niet direct meten. De juiste benadering, en degene die het gereedschap kiest, is om eerst de doorschijnende voorgrond over de achtergrond samen te stellen met behulp van standaard source-over blending, en vervolgens de verhouding te meten tegen het afgeplatte resultaat. Dit komt overeen met wat een gebruiker daadwerkelijk ziet in plaats van de kleur die u nominaal hebt ingesteld.
Wat zijn de WCAG-drempels die ik moet raken?
WCAG definieert contrastvereisten op twee conformiteitsniveaus en voor drie brede inhoudstypen. Hier is het hele plaatje op één plek.
| Inhoudstype | a Een minimum | AAA-minimum |
|---|---|---|
| Normale tekst (onder ~24px) | 4.5:1 | 7:1 |
| Grote tekst (~24px, of ~18.66px vetgedrukt) | 3:1 | 4.5:1 |
| UI-componenten en afbeeldingen | 3:1 | 3:1 (geen aparte AAA) |
| Logo's en incidentele tekst | ontheffen | ontheffen |
Een paar opmerkingen van het vele malen hebben toegepast van deze tabel. "Grote tekst" wordt gedefinieerd door de weergegeven grootte, niet door hoe belangrijk de tekst aanvoelt. De drempel is 18pt voor regulier gewicht en 14pt vet, wat zich vertaalt naar ongeveer 24px en 18.66px. Alles wat of hoger is, krijgt de ontspannen 3:1 bar voor AA, omdat grotere lettervormen leesbaar blijven bij een lager contrast.
De UI-componentenregel is Succescriterium 1.4.11, en het is degene die teams het vaakst vergeten, Er staat dat de visuele grens van een interactief onderdeel - de rand van een tekstinvoer, de omtrek van een knop, de vorm van een pictogram dat betekenis overbrengt - 3:1 nodig heeft ten opzichte van zijn omgeving. Een formulier vol AA-doorgevende labeltekst met onzichtbare invoerranden faalt nog steeds, en dat heb ik in productie meer dan eens precies gezien.
Ten slotte zijn decoratieve tekst, gehandicapte bedieningselementen en logo's vrijgesteld. Die vrijstelling is smal. Een grijs-uit knoplabel is prima; een low-contrast paragraaf die je 'quot;secundair' noemde, is dat niet.
Hoe gebruik ik de kleurcontrastcontrole?
De workflow die ik dagelijks gebruik, duurt ongeveer tien seconden per paar. Open de Kleurcontrast checker en voer je tekstkleur in het eerste veld in Je kunt elk formaat plakken - een zescijferig vakje zoals #4b5563, een achtcijferige hex met alfa, een rgb() of rgba() touwtje, een hsl() waarde, of een gewoon CSS-zoekwoord zoals navy. De tool normaliseert wat je het geeft, zodat je formaten vrij tussen de twee velden kunt mengen.
Voer uw achtergrondkleur in het tweede veld in. Op het moment dat beide geldig zijn, verschijnt de exacte verhouding naast een live steekproef van grote, normale tekst en bijschrifttekst die op uw werkelijke achtergrond wordt weergegeven. Dat voorproefje is belangrijk. Het nummer vertelt je of het overgaat, maar het zien van echte woorden op de echte kleur vertelt je of het comfortabel is, wat een hogere lat is dan alleen legaal.
Onder de verhouding krijg je een raster van pass en fail badges: AA en AAA voor zowel normale als grote tekst, plus de 3:1 UI-component check Als een combinatie mislukt, biedt de tool een one-click fix Het loopt je tekstkleur lichter of donkerder in HSL ruimte - behoud van de tint en verzadiging die je hebt gekozen - totdat het de doelverhouding vrijmaakt, dan geeft het je een passing waarde die je direct in je stylesheet kunt kopiëren Dat laatste deel is het verschil tussen een checker die je uitscheldt en een die daadwerkelijk helpt: het houdt je merk tint intact en alleen de lichtheid met het minimaal benodigde.
Alles draait lokaal in uw browser. Geen kleuren, paletten of niet-uitgebrachte merkwaarden verlaten uw apparaat, wat ertoe doet wanneer u een pre-lanceringssysteem voor de lancering van een klant controleert. Het is dezelfde privacy-first benadering die ik gebruik voor elke tool op de site, en ik schreef over waarom die architectuur ertoe doet in de Gids voor gegevensprivacy.
Veelvoorkomende use-cases van echte projecten
Auditing van een ontwerpsysteem-tokens
Wanneer ik kleurentokens instel voor een nieuw project, controleer ik elke semantische koppeling voordat een enkele component wordt verzonden: primaire tekst op achtergrond, gedempte tekst op achtergrond, tekst op primaire, tekst op kaart, tekst bij elke waarschuwingsvariant. Een token dat eenmaal faalt, mislukt overal waar het wordt gebruikt, dus het vangen op het tokenniveau is enorm goedkoper dan het per component te vangen. Ik houd een eenvoudige checklist bij en voer elk paar door de checker, waarbij ik de verhouding naast de tokennaam registreer.
het redden van een merkkleur die "moet" worden gebruikt
Marketing geeft je een merkblauw en zegt dat de knoppen het moeten gebruiken Je test er witte tekst op en krijgt 3.1:1 - prima voor grote tekst, falen voor een knoplabel van normaal formaat Je hebt drie eerlijke opties: verduister het merk blauw iets voor interactieve oppervlakken, gebruik een groter of bruter label zodat de 3:1-drempel van toepassing is, of schakel het label over naar een donkerdere kleur als de knop licht is De tool's suggestiefunctie vindt de dichtstbijzijnde passerende tint zodat je marketing een concrete, minimale verandering kunt laten zien in plaats van een platte & quot;nr."
Plaatsaanduiding en helper controleren
Tijdelijke aanduidingstekst is een recidivist omdat browsers het standaard bij verminderde dekking weergeven, en ontwerpers kiezen daarbovenop een al licht grijs. Vergeet niet om het samengestelde resultaat te testen, niet de nominale kleur. De checker's alpha compositing doet dit voor u: voer de kleur van de tijdelijke aanduiding in met zijn echte dekking over de invoerachtergrond en lees de ware verhouding.
Verificatie van pictogram en randzichtbaarheid
Voor de UI-controle van 1.4.11 test ik het pictogram of de randkleur tegen alles wat er direct achter zit. Een grijze scheidingswand op een witte kaart, een chevron op een gekleurde koptekst, de focusring tegen het veld - deze hebben allemaal 3:1 nodig. Het is een snelle controle die de " alles is er technisch gezien, behalve ik kan ' Ik zie er iets van & quot; klasse van bug.
Hoe verhoudt dit zich tot het gebruik van een ingebouwde check van een ontwerptool?
Ontwerptools hebben contrastindicatoren toegevoegd en browser-ontwikkeltools tonen een verhouding in de kleurenkiezer, dus een terechte vraag is waarom überhaupt een speciale tool bereiken. Hier is mijn eerlijke vergelijking.
| toegang | kracht | begrenzing |
|---|---|---|
| Toegewijde contrastcontrole | Exacte verhouding, alle drempels, alfa-compositing, passerende kleurensuggesties, werkt op elke kleurenreeks | je plakt kleuren handmatig in |
| Ontwerptool plug-in | in lijn met uw tekengebied | Benadert vaak, kan alfa negeren, gekoppeld aan die app |
| Browser dev-tools | Controleert de live weergegeven pagina | Eén paar tegelijk, geen suggesties, vereist dat de pagina eerst bestaat |
| Het bekijken | onbeweeglijk | Verkeerd, constant |
De speciale tool wint wanneer u werkt vanuit waarden in plaats van een weergegeven pagina - tokens beoordelen, een specificatie controleren of een gerapporteerde bug oplossen - en wanneer u een passerend alternatief nodig heeft in plaats van alleen een oordeel De browserontwikkeltools zijn beter zodra de pagina bestaat en u wilt controleren wat er daadwerkelijk is verzonden. Ik gebruik beide, in verschillende stadia.
Geavanceerde notities voor teams die erom geven
Een paar dingen die ik heb geleerd die verder gaan dan de basis. Ten eerste is contrast noodzakelijk, maar niet voldoende. Het passeren van 4.5:1 verwijdert één barrière; het maakt een interface niet alleen toegankelijk. Je hebt nog steeds zichtbare focusstatussen nodig, je moet nog steeds vermijden om betekenis door middel van kleur alleen door kleur over te brengen, en je moet nog steeds echt testen met echte ondersteunende technologie. Behandel de verhouding als een vloer, niet als een finishlijn.
Ten tweede is de donkere modus niet gratis. Een palet dat in de lichtmodus doorgaat, kan in de donkere modus mislukken omdat de luminantierelaties omkeren. Controleer beide thema's. De schakelaar met een donkere achtergrond van de Checker is een voorbeeld van een tuimelschakelaar, precies omdat ik dat steeds vergat.
Ten derde, wees op uw hoede voor "dicht genoeg" een verhouding van 4,48:1 is een mislukking, geen afronding. Schermen variëren, gebruikers variëren en de drempel heeft een marge ingebouwd om een reden. Als je grenst, ga er dan voorbij.
Als u een bredere toolkit aan het samenstellen bent, dan Handleiding voor webontwikkelaars Behandelt hoe contrast past naast de andere cheques die het waard zijn om te automatiseren. En als je kleuren eenmaal voorbij zijn, zijn tools zoals de Gradiëntgenerator en kleurenkiezer Help je de rest van het palet te bouwen op een fundering die je al hebt geverifieerd. Als u ook paginametadata en sociale previews genereert, wordt de Meta-tag-generator Past goed in dezelfde pre-lanceringspas.
FAQ
Wat is een goede kleurcontrastverhouding?
Voor normale hoofdtekst, streef naar ten minste 4,5:1 om te voldoen aan WCAG AA en 7:1 om te voldoen aan het strengere AAA-niveau. Grote tekst, wat betekent ongeveer 24px of 18.66px vet, heeft slechts 3:1 nodig voor AA en 4,5:1 voor AAA. Pictogrammen en interactieve UI-componenten hebben ten minste 3:1 nodig tegen hun omgeving.
Wat telt als grote tekst onder WCAG?
Grote tekst is ten minste 18pt, ongeveer 24px, voor regulier gewicht, of ten minste 14pt, ongeveer 18,66px, wanneer vet. Tekst op of boven die grootte komt in aanmerking voor de ontspannen 3:1 AA-drempel omdat grotere lettervormen leesbaar blijven bij een lager contrast dan kleine.
Wat is het verschil tussen WCAG AA en AAA?
AA is het niveau dat de meeste wetten en organisaties targeten en vereist 4,5:1 voor normale tekst. AAA is het verbeterde niveau en vereist 7:1, wat past bij inhoud die gericht is op gebruikers met een slecht zicht, maar moeilijk te raken is in een heel palet. De meeste teams behandelen AA als de passbar en AAA als een ambitie voor kritische leesinhoud.
Hoe wordt de contrastverhouding berekend?
Elke kleur wordt omgezet in zijn WCAG relatieve luminantie, een gamma-gecorrigeerde en perceptueel gewogen maat voor helderheid. De verhouding is (L_LICHTER + 0,05) gedeeld door (L_Darker + 0,05), waardoor een waarde wordt geproduceerd van 1:1 voor identieke kleuren tot 21:1 voor puur zwart op puur wit.
Heeft transparantie invloed op het contrastresultaat?
Ja. Een semi-transparante tekstkleur laat de achtergrond doorschijnen, wat de effectieve kleur verandert. De juiste methode is om eerst de doorschijnende voorgrond over de achtergrond te composeren en vervolgens de verhouding te meten, zodat de score weerspiegelt wat een gebruiker daadwerkelijk ziet in plaats van de nominale kleur die je instelt.
Waarom wordt mijn tekst op groot formaat doorgegeven, maar faalt het op normale grootte?
De drempels verschillen. Normale tekst heeft 4,5:1 nodig voor AA, terwijl grote tekst slechts 3:1 nodig heeft, dus een verhouding tussen 3 en 4,5 gaat voor koppen, maar mislukt voor body-kopie. Verhoog het contrast voor hoofdtekst of zorg ervoor dat het koppelen alleen wordt gebruikt bij grote maten waar de ontspannen drempel van toepassing is.
Is een passerende contrastverhouding voldoende voor toegankelijkheid?
heel weinig Contrast is noodzakelijk, maar niet voldoende. Je hebt ook zichtbare focusstatussen nodig, je moet vermijden om betekenis door kleur alleen door kleur over te brengen, en je moet testen met echte inhoud en ondersteunende technologie. Het doorgeven van de verhouding verwijdert één gemeenschappelijke barrière, maar maakt op zichzelf geen interface toegankelijk.
Stuurt de kleurcontrastchecker mijn kleuren ergens heen?
heel weinig . Alle parseren en wiskunde worden lokaal in uw browser uitgevoerd met JavaScript. Er worden geen kleurwaarden, merkpaletten of screenshots geüpload of opgeslagen, en de tool blijft werken zonder netwerkverbinding nadat de pagina is geladen.
