Check WCAG Contrast for Accessible Text
Wanneer dit van toepassing is
Use this when you are picking foreground and background colors for UI or content. Enter two sRGB hex colors, compare the ratio to WCAG thresholds, and iterate before you ship.
Te gebruiken tool
Contrastverhouding tussen twee hex-kleuren en AA/AAA-drempels.
WCAG-contrast openen →Stappen
- 1Enter the text (foreground) color as #RRGGBB or #RGB.
- 2Enter the background color the same way.
- 3Read the contrast ratio and which WCAG rows pass or fail.
- 4Adjust colors until you meet your target (often AA for body text).
- 5Re-check after real content is placed (long paragraphs, small labels).
Voorbeelden
- Gray #111827 on white #ffffff for long-form reading.
- Brand accent button: ensure both default and hover states still pass.
Vermijd dit
- Checking only one breakpoint while responsive themes change colors.
- Ignoring non-text UI that still needs discernible boundaries.
- Trusting contrast on gradients without sampling worst-case points.
Gerelateerde tools
Op de blog
Meer in Afbeeldingstools
- Afbeeldingen comprimeren voor snellere webpagina's
- Afbeeldingen voorbereiden voor socialmediaformaten
- EXIF-metadata verwijderen voordat je foto's deelt
- Afbeeldingen converteren voor compatibiliteit en bestandsgrootte
- Watermerken toevoegen om gepubliceerde afbeeldingen te beschermen
- Gevoelige informatie vervagen voor het delen van afbeeldingen
Alle taakhandleidingen of bekijk de volledige lijst op het Afbeeldingstools-hub.
Veelgestelde vragen
Does this replace an audit?
No. It is a fast sRGB check. Full audits cover motion, structure, and more.
Non-hex inputs?
This tool expects hex. Convert from HSL/RGB elsewhere first.