Does your website meet colour contrast accessibility standards?

To find out, enter a foreground and background colour, in RGB hexadecimal (hex) format, or choose from the Color Picker. Then check the Contrast Ratio and example text results, to see if there is enough colour contrast.

If your colours don't have enough contrast, you can adjust the lightness slider to find out what they should be to meet accessibility standards.

→ Learn how to get hex colour values from your site.

Foreground Colour

Enter or pick a color (Alpha value optional).

#
Background Colour

Enter or pick a background color.

#
Contrast Ratio
--:1

Normal Text

  • Text that is less than 18.66px. Usually body content.
  • Contrast Requirement: At least 4.5:1 (AA) or 7:1 (AAA)

WCAG AA: Pass

WCAG AAA: Fail

The quick brown fox jumps over the lazy dog.

Large Text

  • Text that is 18.66px+ and bold, or 24px+. Usually headings.
  • Contrast Requirement: At least 3:1 (AA) or 4.5:1 (AAA)

WCAG AA: Pass

WCAG AAA: Pass

The quick brown fox jumps over the lazy dog.

Frequently Asked Questions

Q: How do I determine the hex colour values from my site.

A: You can install a Browser Eyedropper Extension.

This is often the simplest option for those that are non-technical.

Extension Suggestions

  • ColorZilla (Chrome, Firefox)
  • Eye Dropper (Chrome)
  • ColorPick Eyedropper (Chrome)

Instructions

  1. Install ColorZilla from the Chrome Web Store
  2. Go to your website
  3. Click the eyedropper icon in the toolbar
  4. Hover over the item you want the Hex colour for
  5. Click the item (the HEX code copies automatically)