Contrast Ratio Calculator
Check color contrast for WCAG accessibility compliance and ensure your designs are readable for everyone
Step 1: Pick Your Colors
Select your foreground (text) and background colors:
- Click the color picker square to open the color selector
- Or type a hex code directly (e.g., #FF5733)
- The foreground is typically your text color
- The background is the color behind your text
Step 2: Preview the Result
See how your color combination looks in real-time:
- The preview box shows both large and normal text
- Check if the text is easily readable
- Use the swap button to quickly reverse colors
- Test both light-on-dark and dark-on-light combinations
Step 3: Check WCAG Compliance
Review the accessibility results:
- AA Normal (4.5:1) – Required for most body text
- AA Large (3:1) – For text 18px+ or 14px bold
- AAA Normal (7:1) – Enhanced accessibility
- Green checkmark = Pass, Red X = Fail
Step 4: Use Suggestions
If your colors don’t pass, try the suggestions:
- Click any suggested color swatch to apply it
- All suggestions meet AA compliance
- Shows the contrast ratio for each option
- Keeps your background, adjusts the foreground
What is WCAG?
Web Content Accessibility Guidelines (WCAG) provide standards for making content accessible. Contrast ratios ensure text is readable by people with visual impairments, including color blindness and low vision.
AA vs AAA
Level AA is the standard requirement for most websites and is legally required in many jurisdictions. Level AAA is enhanced accessibility, recommended for government, healthcare, and educational sites.
Large Text Definition
Large text is defined as 18px+ regular weight or 14px+ bold. It requires lower contrast because larger characters are easier to read. This applies to headings and prominent text.
Contrast Formula
Contrast ratio is calculated using relative luminance: (L1 + 0.05) / (L2 + 0.05). The maximum ratio is 21:1 (black on white). Values closer to 21:1 indicate higher contrast.