Color Contrast Checker
Instantly check if your color combination meets WCAG accessibility standards. See pass/fail for AA and AAA at normal and large text sizes.
Hello World
The quick brown fox jumps over the lazy dog
Small text sample (14px)
Contrast Ratio
21.00:1
WCAG Results
Preset Pairs
How to use Color Contrast Checker
A comprehensive WCAG 2.1 color contrast checker that tests foreground/background pairs against AA and AAA standards with a live text preview. See exactly how your color combination looks with normal text, large text, and bold text rendered at realistic sizes. Share results via URL for design reviews and accessibility audits.
- Enter or pick the foreground (text) color using HEX, RGB, or the color picker.
- Enter or pick the background color.
- Review the live preview showing how text actually looks with this combination.
- Check the WCAG AA/AAA pass/fail badges for each text size category.
- Copy the shareable URL to include the result in a design review or audit report.
Your data never leaves your device — 100% private processing.
Beyond the ratio: real-world readability
A passing contrast ratio does not guarantee readability in all contexts. Font weight, letter spacing, line length, and font size all influence legibility. Thin (100–300 weight) fonts at the 4.5:1 minimum often feel harder to read than bold fonts at the same ratio. Users with dyslexia benefit from slightly wider letter spacing and avoiding pure black (#000) on pure white (#fff) — a softer off-white background like #f8f8f8 reduces visual stress. Always validate results with real users, especially for body text in content-heavy interfaces.
Accessibility audit workflow
Start by extracting your design system's text/background color combinations: primary text on page background, secondary text, disabled text, link colors, button labels on button backgrounds, placeholder text on input backgrounds, and badge/tag text. Test each pair here. Document failures with the actual ratio and the nearest passing color adjustment. For designs already in production, browser devtools (Chrome's CSS overview or the Accessibility pane) can identify contrast failures at scale across the whole page.
Glossary
- WCAG 2.1 AA
- The baseline web accessibility conformance level required by most legal standards (ADA, EN 301 549, AODA).
- WCAG 2.1 AAA
- The enhanced accessibility level — stricter ratios, not always achievable for all text on all backgrounds.
- Luminance
- The perceived brightness of a color, calculated using the WCAG relative luminance formula.
- Design token
- A named variable (e.g., --color-text-primary) that centralizes color decisions in a design system.
Related reading
Frequently Asked Questions
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Why use Color Contrast Checker?
- Converts between HEX, RGB, HSL, HSV, and CMYK instantly
- Accessibility contrast checker built in
- Generates harmonious palette variations from a single colour
- Export-ready CSS variables and design tokens
Common use cases
- Pick brand colours that meet WCAG accessibility standards
- Generate a complementary palette from a logo colour
- Convert Figma HEX codes to CSS rgb() for developers
- Create a gradient from two brand colours
- Verify sufficient contrast for text on coloured backgrounds
Related Color & Design
Color Picker & Converter
Pick a color and instantly convert between HEX, RGB, HSL, HSB, and CMYK. Generate tints, shades, and color palettes.
CSS Gradient Generator
Create beautiful CSS linear, radial, and conic gradients online. Get the CSS code instantly with a live preview.
Color Palette Generator
Generate beautiful harmonious color palettes online. Choose from complementary, analogous, triadic, and monochromatic schemes. Free color scheme creator.
Color Converter
Convert colors between HEX, RGB, HSL, HSV, and CMYK formats instantly. Paste any color format and get all others with one click.
Image Color Extractor
Extract dominant colors from any image. Upload a photo and instantly get the top colors as HEX and RGB values. Free online color palette extractor.
Color Shades & Tints Generator
Generate a full color scale from any color. Create 9 shades and 9 tints with Tailwind-style naming (50-900). Copy as CSS variables or Tailwind config.
Explore all Color & Design.