Check colour contrast for accessible text

Test a foreground colour against a background colour, see the contrast ratio instantly, and check whether the pair passes WCAG guidance for normal text, large text, and interface elements.

Contrast ratio

21.00:1 Excellent contrast for normal and large text

WCAG results

Normal text AA needs 4.5:1

Pass

Normal text AAA needs 7:1

Pass

Large text AA needs 3:1

Pass

Large text AAA needs 4.5:1

Pass

UI components AA needs 3:1

Pass

Quick actions

What to improve

This pair has strong contrast. It should be readable for body text, headings, buttons, and simple interface details.

Live preview

Text, heading, and button preview

Black Cats Studio

Designed for midnight readers

Your colours should work in the real world, not just in a picker. Test headings, body copy, and buttons before your design disappears into the dark.

Colours

Pick foreground and background

HEX fields and RGB sliders update live

Foreground HEX

Red 17 Green 17 Blue 17

Background HEX

Red 246 Green 211 Blue 101

Guide

What does colour contrast mean?

Readable colour pairs

Contrast is the difference between two colours

Text needs enough separation from its background so people can read it comfortably. Two colours can look different in a palette but still be too close in brightness to be accessible.

WCAG uses ratio targets

Normal text should reach 4.5:1 for AA and 7:1 for AAA. Large text and many interface components have lower thresholds because their size or shape makes them easier to see.

Examples

Accessible colour pair examples

Try these combinations

Foreground	Background	Use case
#111111	#F6D365	Dark text on a warm feature panel
#FFFFFF	#124E66	Light text on a deep blue button
#0B1020	#D9F99D	Dark interface text on a pale green notice
#F8FAFC	#3B0764	Light headings on a rich purple banner

If one of these tools helped you, feel free to support 27tools

Buy me a coffee