Color Contrast Checker
Calculate WCAG contrast ratio and text pass/fail results for two colors.
Instructions: Color Contrast Checker
Follow these steps to get a reliable result without unnecessary setup.
- 1
Enter foreground and background HEX colors or choose them with the color inputs.
- 2
Choose the options in Color Contrast Checker that match your intended output, such as units, format, mode, range or quality when those controls are available.
- 3
Run Color Contrast Checker and review the displayed result, preview or validation message before proceeding.
- 4
Display, print and accessibility requirements vary, so verify the generated value in the final design environment.
- 5
Use the available reset, copy or download action in Color Contrast Checker when you are satisfied with the result; only actions supported by this tool are shown.
About this tool: Color Contrast Checker
Compare foreground and background colors using relative luminance, show the exact contrast ratio and indicate WCAG AA/AAA thresholds for normal and large text.
The output is meant to support practical visual decisions such as dimensions, color choices, contrast or layout planning.
Color Contrast Checker is presented in the shared NexterHub tool layout so the working controls stay near the top while the method, example, limitations and related utilities remain available below the result.
How it works
HEX colors are converted to sRGB channels, linearized, combined into relative luminance, then compared with (lighter + 0.05) / (darker + 0.05).
Practical example
Foreground #111827 on #FFFFFF produces a high contrast ratio and passes the displayed normal-text thresholds.
Important notes
Display, print and accessibility requirements vary, so verify the generated value in the final design environment.
Privacy & processing
The calculation or color processing runs in the browser in the current build.
Frequently asked questions
What does Color Contrast Checker do?
Calculate WCAG contrast ratio and text pass/fail results for two colors.
How do I use Color Contrast Checker?
Start with the main input step: Enter foreground and background HEX colors or choose them with the color inputs. Then choose any relevant options, run the tool and review the result.
How does Color Contrast Checker calculate or process the result?
HEX colors are converted to sRGB channels, linearized, combined into relative luminance, then compared with (lighter + 0.05) / (darker + 0.05).
What should I check before using a result from Color Contrast Checker?
Display, print and accessibility requirements vary, so verify the generated value in the final design environment.
Does Color Contrast Checker send my input to a NexterHub server?
The calculation or color processing runs in the browser in the current build.
Can I use Color Contrast Checker on a phone or tablet?
Yes. Color Contrast Checker uses the responsive NexterHub tool layout, so controls and results adapt to smaller touch screens.