#101828 on #ffffff
- AA normal text
- Pass
- AA large text
- Pass
- AAA normal text
- Pass
WCAG AA uses 4.5:1 for normal text and 3:1 for large text. Also check focus, hover, disabled, and icon states.
Color Contrast Checker
Use this free color contrast checker to compare two hex colors, calculate contrast ratio, and see WCAG AA and AAA pass or fail results.
Research-backed assumptions Formula steps Examples included Private in-browser use
Formula steps
- Convert each hex color to sRGB channel values.
- Calculate relative luminance for foreground and background.
- Use the WCAG contrast formula: (lighter + 0.05) / (darker + 0.05).
How to use the color contrast checker
- Enter foreground and background colors as #RGB or #RRGGBB hex values.
- Press Check contrast to calculate the contrast ratio.
- Read AA and AAA pass/fail results for normal and large text.
- Also check hover, focus, selected, disabled, icon, and real-page states before publishing.
Common uses
Check text color against a page background before publishing.
Compare brand colors against WCAG AA and AAA thresholds.
Test button, label, and navigation color pairs.
Quickly reject low-contrast combinations during design work.
Examples
High contrast ratio
AA pass/fail check
Contrast ratio
Frequently asked questions
Plain-language answers about when to use the tool, what it does with your inputs, what to double-check, and how privacy works.
When should I use the Color Contrast Checker?
Use it when your task matches one of these common needs: Check text color against a page background before publishing. Compare brand colors against WCAG AA and AAA thresholds. It works best when you already know the values, dates, units, or settings the page asks for.
What is the Color Contrast Checker doing with my inputs?
In plain language: The checker converts hex colors to sRGB, calculates relative luminance, then uses the WCAG contrast formula: (lighter + 0.05) / (darker + 0.05). The examples on the page are there so you can compare your inputs with a filled-out calculation before copying the answer.
What should I double-check before trusting the answer?
Contrast ratio is one accessibility check. Also review font size, focus states, hover states, icons, disabled controls, and real page context. Also check that you used the right unit, date, scale, or mode because small input changes can change the result.
Does the site save what I enter?
No. The calculator runs in your browser tab. Your recent answers stay only on the page while you use it, and they are not sent to a server.
Related tools
Aspect Ratio Calculator Simplify aspect ratios and scale width or height while keeping proportions. Open Text Case Converter Convert text to uppercase, lowercase, title case, sentence case, camelCase, snake_case, and kebab-case. Open Word Counter Count words, characters, sentences, paragraphs, lines, and estimated reading time. Open