Een kleurenomzetter die de weergave afrondt maar het oordeel niet
Een contrastverhouding van 4,496 verschijnt als 4,50 : 1 en voldoet toch niet aan AA. De test op voldoen of niet gebruikt de exacte waarde, en alleen het label wordt afgerond. Aan de kant van de omzetter worden HSL en CMYK afgerond op gehele getallen. CMYK is de gewone wiskundige omzetting uit RGB, zonder ICC-profiel, dus een drukkerij kan een ander resultaat krijgen. De kleurenomzetter begint met #3b82f6, een middelblauw. Dat wordt rgb(59, 130, 246), hsl(217, 91%, 60%) en cmyk(76%, 47%, 0%, 4%).
Uitproberen met #003366 en #999999
Een huisstijlblauw komt binnen als #003366. In CSS wil je lichtere en donkerdere varianten, en HSL maakt dat makkelijk: de tool geeft hsl(210, 100%, 20%), dus je verhoogt alleen het laatste getal. Voor een flyer luidt hetzelfde blauw cmyk(100%, 50%, 0%, 60%) als eerste waarde om aan de drukker te geven.
Een lichtgrijze plaatshouder als #999999 op wit geeft 2,85 : 1. Dat voldoet niet aan AA, zelfs niet voor grote tekst. Wit op het standaard #2563eb geeft 4,68 : 1, wat voldoet aan AA voor lopende tekst maar niet aan AAA.
Stappen voor één kleur en één contrastpaar
- Klik op het kleurvlak om de kleurkiezer van je browser te openen, of plak een code in het veld HEX. Zes cijfers en de korte vorm met drie cijfers (#0af) werken allebei, met of zonder het voorafgaande #.
- Lees de velden RGB, HSL en CMYK (drukwerk) af. Druk op de kopieerknop boven een veld om de waarde op het klembord te zetten.
- Open het rechterpaneel en stel de Tekstkleur en de Achtergrond in.
- Lees de verhouding en de vier labels af: AA Normaal, AAA Normaal, AA Groot en AAA Groot. Ze worden bijgewerkt zodra je een kleur kiest.
Wat de velden accepteren en wat lokaal blijft
Alleen het HEX-veld en de kiezer sturen de omzetting aan. De velden RGB en HSL lijken bewerkbaar, maar erin typen verandert niets. CMYK is alleen-lezen.
Het HEX-veld herschrijft zichzelf zodra de inhoud een geldige code is. Typ je #ff0 op weg naar #ff0000, dan springt het veld naar #ffff00, dus plak liever de volledige code. Codes met acht cijfers (alfa), benoemde kleuren als "tomato" en notaties als OKLCH of HSV worden niet ondersteund. Ongeldige invoer wordt zonder foutmelding genegeerd.
De twee contrastkiezers werken los van de omzetter en accepteren alleen kleuren uit de kiezer. De tool kent je lettergrootte niet. WCAG noemt tekst groot vanaf 18 pt, of 14 pt vet.
Omzetting en contrast draaien in JavaScript in je browser. Een kleur kiezen of typen verstuurt geen verzoek, en het netwerkpaneel van je ontwikkelaarstools toont dat. De kopieerknoppen schrijven naar je klembord. De code van de tool slaat je kleuren niet op.