Contrastcontrole
Controleer de WCAG-contrastverhoudingen van kleurparen, met AA- en AAA-beoordelingen en suggesties voor oplossingen.
Contrastcontrole
Plak voorgrond- en achtergrondparen, één per regel — #7a1f2b op #ffffff, #333, #eee of rgb(0, 0, 0) #fff — en de WCAG 2-contrastverhouding van elk paar komt onmiddellijk terug, met een goed of slecht oordeel voor elk conformiteitsniveau. De verhouding loopt van 1:1 (helemaal geen contrast) tot 21:1 (zwart op wit) en wordt berekend op basis van de relatieve helderheid, precies zoals de richtlijnen dit definiëren, dus de cijfers komen overeen met browserinspecteurs en audittools.
WCAG noemt twee niveaus. AA, waar de meeste wetten en contracten naar verwijzen, vereist 4,5:1 voor normale tekst en 3:1 voor grote tekst. AAA, het strengere doel, vraagt om 7: 1 en 4,5: 1. Tekst telt net zo groot vanaf 18 pt (ongeveer 24 px) in normaal gewicht, of vanaf 14 pt (ongeveer 18,7 px) in vetgedrukte tekst - dat is de reden waarom een kop kan passeren in een verhouding waarin een alinea mislukt. Het rapport beschrijft alle vier de cheques per paar; schakel de uitvoer naar Compact voor één regel per paar, wat sneller leest als u een heel palet doorzoekt.
Wanneer een paar AA mist voor normale tekst, schakelt u 'Oplossing voorstellen' in en de tool maakt de voorgrond in kleine helderheidsstappen donkerder of lichter, waarbij de tint behouden blijft, totdat deze 4,5: 1 bereikt - en drukt vervolgens de dichtstbijzijnde passerende hex af, klaar om terug in uw stylesheet te plakken.
Alles draait in uw browser; niet-uitgebrachte merkpaletten verlaten nooit uw apparaat. Kleuren kunnen 3- of 6-cijferige hexadecimale tekens zijn, met of zonder de hash, rgb() of rgba(), of een gewone CSS-naam: de standaard 16 plus de populaire uitgebreide. De volledige CSS-lijst met 148 namen is bewust niet weergegeven, dus schrijf exotische namen als hex. Een lijn die geen kleurenpaar is, wordt rustig genoteerd en de rest blijft verwerken.