Kleurkontraskontroleerder
Gratis kleurkontraskontroleerder: toets of teks- en agtergrondkleure aan WCAG 2.2 AA en AAA voldoen, sien die kontrasverhouding en die naaste kleur wat slaag.
Dit is gewone teks, so groot soos 'n paragraaf.
Groot teks
Knoppie| AA | AAA | |
|---|---|---|
| Gewone teks | ||
| Groot teks (24 px, of 18,7 px in vetdruk) | ||
| Ikone en koppelvlakrande | — |
Wat dit doen
Hierdie kontroleerder meet die kontras tussen 'n tekskleur en sy agtergrond met die formule van die WCAG 2.2-toeganklikheidsriglyne, wat in baie toeganklikheidswette gebruik word. Dit wys die kontrasverhouding, van 1:1 (geen kontras) tot 21:1 (swart op wit), en of die paar die AA- en AAA-vlakke slaag vir gewone teks, groot teks en koppelvlakkomponente soos ikone en rande. Wanneer 'n paar druip, stel dit die naaste kleur met dieselfde kleurtoon voor wat wel slaag.
Hoe om dit te gebruik
- Voer die tekskleur en die agtergrondkleur in of kies hulle.
- Lees die kontrasverhouding en die AA- en AAA-uitslae, en kyk na die regstreekse voorskou.
- As dit druip, druk Gebruik by 'n voorgestelde kleur en kopieer dan die skakel om die uitslag te deel.
Gereelde vrae
Watter kontrasverhouding het ek nodig?
Vlak AA, die gewone wetlike teiken, vereis 4,5:1 vir gewone teks en 3:1 vir groot teks en vir ikone en koppelvlakrande. Vlak AAA vereis 7:1 vir gewone teks en 4,5:1 vir groot teks.
Wat tel as groot teks?
Teks van minstens 24 CSS-pixels (18 punte), of minstens sowat 18,7 CSS-pixels (14 punte) in vetdruk. Opskrifte is dikwels groot; lopende teks gewoonlik nie.
Hoekom druip #777777 op wit?
Die verhouding is 4,47:1, net onder die 4,5:1 wat vir gewone teks vereis word. Verhoudings word nie opgerond nie, dus is 'n effens donkerder grys soos #767676 (4,54:1) die ligste grys wat op wit slaag.
W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast