Quick start
- Enter the text color as #RGB or #RRGGBB.
- Enter the background color as #RGB or #RRGGBB.
- Press Check contrast to calculate the ratio.
Best uses
These are the situations this tool is meant for. If your task is close to one of these, the examples and notes below can help you choose the right inputs.
- 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.
What this calculator is solving
The Color Contrast Checker helps you catch low-contrast text and background combinations before they become a design or accessibility problem. It reports WCAG AA and AAA pass or fail results.
You do not need to memorize the formula first. Start by matching each input label on the calculator to the number, date, unit, or setting you actually have.
The formula in plain language
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.
If that sounds abstract, use the example cards on the calculator page. They show a complete set of inputs and the kind of answer you should expect.
How to read the answer
Read the headline result first. Then look at the smaller supporting lines because they explain the parts behind the answer, such as totals, units, ranges, or formula steps.
- The contrast ratio compares the lighter luminance with the darker luminance.
- AA normal text should be at least 4.5:1.
- AA large text should be at least 3:1.
Common mistakes to avoid
If the answer looks strange, the most likely cause is a small input mismatch: the wrong unit, date, weight, scale, mode, or policy assumption.
- Do not check only the default state; hover, focus, disabled, and selected states matter too.
- Do not rely on color alone to communicate state.
- Do not assume a passing contrast ratio fixes all accessibility issues.
Research and references
These references shaped the calculator assumptions, unit choices, or safety notes.
Examples from the calculator
High contrast ratio
AA pass/fail check
Contrast ratio
FAQ in plain language
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.
Related tools
- Aspect Ratio Calculator Simplify aspect ratios and scale width or height while keeping proportions.
- Text Case Converter Convert text to uppercase, lowercase, title case, sentence case, camelCase, snake_case, and kebab-case.
- Word Counter Count words, characters, sentences, paragraphs, lines, and estimated reading time.
Privacy and copying results
Recent answers stay visible only while you work in the current browser tab. They are not sent to a server.
Use Copy answer when you want to paste the expression and result into notes, homework, a message, or another document. Check the units and assumptions before copying.