Check WCAG 2 contrast ratios for text and UI colors with AA/AAA pass/fail results.
Loading tool
About Color Contrast Checker
Calculates the WCAG 2 contrast ratio between a text color and a background color and shows pass or fail for AA and AAA normal text, large text, and UI components (SC 1.4.3, 1.4.6 and 1.4.11). Colors can be entered as hex, rgb(), hsl(), oklch() or CSS names; translucent colors are composited first. The APCA Lc value is shown for reference, and when a pair fails, the tool suggests the nearest darker and lighter text colors that meet your chosen target.
Common uses
- Check brand colors against WCAG AA before shipping a design
- Find the closest accessible variant of a text color that fails contrast
- Verify button, border and icon colors against the 3:1 non-text requirement
- Check text on a semi-transparent overlay
FAQ
- What contrast ratio does WCAG AA require?
- At least 4.5:1 for normal text and 3:1 for large text. AAA raises this to 7:1 for normal text and 4.5:1 for large text.
- What counts as large text in WCAG?
- Text at least 18 point (24 CSS px) in regular weight, or at least 14 point (about 18.66 CSS px) in bold.
- How is the contrast ratio calculated?
- Ratio = (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors. It ranges from 1:1 (identical) to 21:1 (black on white).
- What is APCA?
- The Accessible Perceptual Contrast Algorithm is a newer contrast model developed for future WCAG versions. It reports an Lc value and accounts for polarity and font size, but WCAG 2 ratios are still what current conformance is measured against.