Kleurcontrast controleren
Controleren WCAG AA en AAA tekst contrast voor ondoorzichtige hex kleuren. Een voorbeeld van uw paar, wissel kleuren, en breng een hoger contrast tekst alternatief.
Contrastverslag
Color contrast report
Text: #777777 Background: #ffffff Contrast ratio: 4.4781:1
- AA · normal text: Fail (requires 4.5:1)
- AA · large text: Pass (requires 3:1)
- AAA · normal text: Fail (requires 7:1)
- AAA · large text: Fail (requires 4.5:1)
Large text: at least 24 CSS px, or approximately 18.67 CSS px when bold. This checks opaque sRGB text contrast only, not overall accessibility.
De exporttekst blijft in het Engels; je invoer blijft ongewijzigd.
Geen aanmelding. Geen AI credits. Deze tool assembleert uw uitvoer in uw browser.
Van een idee tot iets nuttigs.
- 01
Voer tekst en achtergrondkleuren in.
- 02
Herziening van de berekende verhouding en normale of grote tekstdrempels.
- 03
Probeer een voorgestelde tekstkleur en exporteer het resultaat.
Een beetje context.
Contrastratio's gebruiken de WCAG relatieve helderheid formule voor ondoorzichtige sRGB kleuren. AA normale tekst vereist 4.5:1 en AA grote tekst vereist 3:1. Grote tekst betekent over het algemeen ten minste 24 CSS pixels, of ruwweg 18,67 CSS pixels in vet. De ruwe verhouding bepaalt het resultaat voor afronding. Dit is een kleurcontrole, geen toegankelijkheidscontrole.
Goede vragen.
Kan ik transparante kleuren invoeren?
Nee. Gebruik ondoorzichtige drie- of zescijferige hexwaarden. Composite transparante kleuren op hun laatste achtergrond voor het meten.
Betekent een passerende verhouding dat mijn pagina toegankelijk is?
Nee. Toetsenbord navigatie, semantiek, focus, leesbaar grootte, en andere eisen nog moeten worden getest. Het gereedschap evalueert alleen dit tekst/achtergrondpaar.