Accessibility
Contrast Checker
Validate color contrast for readable UI text and accessibility compliance.
The Contrast Checker calculates the luminance ratio between a text color and a background color and maps the result to WCAG AA and AAA thresholds. It gives you a quick answer to the question, “Will this text be readable for most users?” and provides clear pass or fail indicators for both normal and large text sizes.
Preview
See the real-world contrast with the text sample.
Sample heading
Sample body text goes here.
Contrast results
WCAG AA/AAA results for normal and large text.
Contrast ratio
-
AA (Normal)
-AAA (Normal)
-AA (Large)
-AAA (Large)
-What this tool does
The Contrast Checker calculates the luminance ratio between a text color and a background color and maps the result to WCAG AA and AAA thresholds. It gives you a quick answer to the question, “Will this text be readable for most users?” and provides clear pass or fail indicators for both normal and large text sizes.
When to use this tool
Use it whenever you are selecting UI colors, building a design system, or preparing a marketing page. It pairs well with Color Palette Generator when you need to validate a new palette, and with Color Converter when you are translating values between HEX, RGB, and HSL. It is also useful for checking dark mode variants before launch.
How it works
The tool converts each color to relative luminance using standard sRGB formulas, then computes the contrast ratio between the two values. It compares that ratio against WCAG guidelines for normal and large text. A live preview shows how the colors feel in context so you can judge readability beyond the numeric score.
Example use case
You are finalizing a call-to-action button with white text on a blue background. Enter the colors, confirm the ratio passes AA for normal text, and then test the inverse combination for a secondary button. Copy the CSS values once both states meet your accessibility target.
Use cases
- Verify button text readability on brand colors before launch.
- Check dark mode text contrast for accessibility compliance.
- Audit a UI component library for WCAG targets.
Notes & limitations
Contrast ratios are calculated for flat colors and do not account for overlays, gradients, or complex imagery. Always test final components in their real context, especially if text sits on images. WCAG thresholds are a baseline; higher contrast may be needed for smaller type or low-quality displays. This tool does not replace full accessibility audits.
Font size and weight affect readability even when ratios pass. A thin, light font at small sizes can still feel low-contrast. Use the preview to simulate your actual type scale, and consider raising contrast for UI elements that are critical to navigation or safety.
