Tools / Colour

Colour contrast checker

Check whether your text, buttons and icons are readable for everyone. Results follow WCAG 2.2, and if a pair fails you get the closest colour that passes.

Colours

Text colour

Background colour

Try a pair

Contrast ratio

4.69:1

Good

Preview

Large heading text

Body text at 16px. This is what most of your paragraph copy, list items and form labels will look like on this background.

Small print at 13px, the kind used for captions and footnotes.

Button Outline button

Suggested fix

What do AA and AAA mean?

WCAG is the web accessibility standard. Level AA is the usual legal and industry target and needs a ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA is stricter, at 7:1 and 4.5:1.

What counts as large text?

Text that is at least 24px, or at least 18.66px and bold. Buttons, form borders and icons need 3:1 against whatever sits next to them.

Setting this up in Divi

Once you have a passing pair, add both colours to Divi → Theme Options → Global Colours so every module uses the checked values.