How to check color contrast
- Enter the text color and the background color as hex, rgb() or a color name, or use the color pickers.
- The preview shows real text at different sizes, and the contrast ratio is calculated instantly.
- Check the pass/fail table for WCAG AA and AAA. If it fails, click Suggest an accessible text color to get the closest passing shade of your color.
WCAG contrast requirements
The Web Content Accessibility Guidelines (WCAG 2.1 and 2.2) define contrast as (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker colors. Ratios range from 1:1 (identical colors) to 21:1 (black on white). Level AA requires 4.5:1 for normal text and 3:1 for large text and for user interface parts such as input borders, icons and focus rings. Level AAA requires 7:1 and 4.5:1. The ratio is truncated, not rounded, before comparing, so 4.499:1 fails, as it would in an audit.
Good contrast helps everyone, not only people with low vision or color blindness: it makes text readable on phones in sunlight and on cheap screens. Light grey text on white, a common design trend, is the most frequent accessibility failure on the web. The suggestion button keeps your hue and only changes lightness, so your brand color stays recognisable.
Everything runs in your browser.
What contrast ratio do I need?
4.5:1 for body text and 3:1 for large text and UI components to meet WCAG AA, which most laws and policies reference.
Does WCAG apply to logos?
No. Logos, brand names and decorative text are exempt, as is text in disabled controls.
Is APCA replacing the WCAG ratio?
APCA is a proposed method for future guidelines. Current WCAG 2.x audits and legal requirements still use the ratio shown here.