Contrast Checker
Enter foreground and background colors to get an instant WCAG contrast ratio with pass/fail for normal and large text.
How to check color contrast
- Set foreground (text) and background colors with the picker or text fields.
- The WCAG contrast ratio and AA/AAA badges update live.
- Swap colors to reverse the pair.
- Copy the results, the ratio, or a CSS snippet.
FAQ
- WCAG 2.x relative luminance formula for sRGB colors. Opaque colors only in this version.
- AA: 4.5:1 normal text, 3:1 large text. AAA: 7:1 normal text, 4.5:1 large text.
- Yes. Copy the full results, the ratio alone, or a CSS color/background snippet.
- This version evaluates opaque sRGB colors only. Semi-transparent text over varied backgrounds needs manual flattening to a solid pair first.
- 18pt regular or 14pt bold and larger qualify as large text, which has lower AA and AAA thresholds than body copy.
Related tools
- Contrast Ratio CalculatorGet the exact contrast ratio between two sRGB colors using the WCAG relative luminance formula.
- Color PickerPick a color visually or type any format.
- HEX to RGBTurn a hex color into an rgb() function and individual channel values.
- RGB to HEXEnter RGB channel values or paste an rgb() string to get an uppercase hex code.