Contrast Checker
Check WCAG 2.x color contrast between foreground and background colors. See the contrast ratio, AA / AAA pass/fail for normal and large text, and live-preview a sample sentence.
Processed in your browser · No upload
Loading tool…
Contrast math runs entirely in your browser. Colors are never uploaded.
FAQ
- What does WCAG AA and AAA mean?
- AA is the practical baseline: 4.5:1 for normal text and 3:1 for large text. AAA is stricter: 7:1 for normal text and 4.5:1 for large text.
- What's 'large text' under WCAG?
- Text ≥ 18pt (~24px) or bold ≥ 14pt (~18.6px) is considered large.
- Why is my light-gray-on-white failing?
- Light gray text on white usually sits around 1.5–3:1. WCAG AA requires at least 4.5:1 for body text. Darken the text or pick a darker accent.
- What about non-text contrast (icons, UI borders)?
- WCAG 2.2 SC 1.4.11 requires a 3:1 ratio for graphical objects and UI component boundaries against adjacent colors — for example icon strokes, focus rings, and input borders.
Related Tools
Color Converter
Convert any color between HEX, RGB, HSL and HSV — all in your browser. Use the color picker, see live previews, and copy values to use in CSS, design tools, or code.
Box Shadow Generator
Design CSS box-shadow values visually in your browser. Adjust offset, blur, spread, color, and inset for soft elevation, hard drop shadows, or material-style depth.
Border Radius Generator
Visually tweak CSS border-radius. Adjust all four corners individually, pick from presets, or lock to a circle / pill. Copy the produced border-radius value straight into your stylesheet.