Color Contrast Checker
Enter foreground and background colors to calculate their contrast ratio per WCAG 2.1. Instantly see whether the combination passes AA (4.5:1) and AAA (7:1) thresholds for normal and large text, with a live preview. Runs in your browser.
Check the contrast ratio between a foreground and background HEX color and compare the result with common WCAG AA and AAA text thresholds.
How to check color contrast
- Enter or pick foreground and background HEX colors.
- Read the calculated contrast ratio and preview the color pair.
- Review AA and AAA pass, large-text-only, or fail indicators.
How the calculation works
The tool converts sRGB channels to relative luminance and computes the standard contrast ratio from the lighter and darker luminance values.
AA uses 4.5:1 for normal text and 3:1 for large text; AAA uses 7:1 for normal text and 4.5:1 for large text.
Privacy and limitations
All calculations run locally in the browser. The checker evaluates only the two entered colors and does not inspect font size, weight, opacity, gradients, images, focus states, or the rest of a real page.
Contrast Checker FAQ
What color formats are accepted?
Three- or six-digit HEX values.
What is the maximum contrast ratio?
Black and white are approximately 21:1.
Does AA passing mean my whole page is accessible?
No. Contrast is only one accessibility requirement.
Does it know whether my text is large?
No. It shows both normal and large-text thresholds for you to interpret.
Are colors uploaded?
No. The calculation is local.