Utilities

Accessibility.
Lab.

A simple, practical way to check whether a colour pairing is clear enough for everyone to read and use.

Check your colours

Palette library

Accessible colour pairings.

54 ready-to-use foreground and background combinations, grouped as solid-to-tint colour families, all meeting WCAG AA for normal text.

Colour family

Red

Aa
#FFFFFF#B02A376.5:1 AA
Aa
#58151C#F8D7DA10.22:1 AA
Aa
#58151C#F1AEB57.45:1 AA
Aa
#58151C#EA868F5.4:1 AA
Aa
#58151C#FDE2E511.17:1 AA
Aa
#58151C#FFF0F112.34:1 AA

Colour family

Yellow

Aa
#212529#FFC1079.46:1 AA
Aa
#3B2900#FFF3CD12.61:1 AA
Aa
#3B2900#FFECB511.92:1 AA
Aa
#3B2900#FFE69C11.34:1 AA
Aa
#3B2900#FFDA6A10.3:1 AA
Aa
#3B2900#FFF7E013.06:1 AA

Colour family

Blue

Aa
#FFFFFF#0842989.36:1 AA
Aa
#052C65#CFE2FF10.28:1 AA
Aa
#052C65#9EC5FE7.64:1 AA
Aa
#052C65#6EA8FE5.59:1 AA
Aa
#052C65#DCEBFF11.17:1 AA
Aa
#052C65#EAF3FF12.07:1 AA

Colour family

Green

Aa
#FFFFFF#146C436.45:1 AA
Aa
#0A3622#D1E7DD10.35:1 AA
Aa
#0A3622#A3CFBB7.8:1 AA
Aa
#0A3622#75B7985.74:1 AA
Aa
#0A3622#E1F3E811.63:1 AA
Aa
#0A3622#EDF9F112.42:1 AA

Colour family

Black

Aa
#FFFFFF#21252915.43:1 AA
Aa
#090909#F8F9FA18.89:1 AA
Aa
#090909#E9ECEF16.79:1 AA
Aa
#090909#DEE2E615.29:1 AA
Aa
#090909#CED4DA13.33:1 AA
Aa
#090909#FFFFFF19.91:1 AA

Colour family

Violet

Aa
#FFFFFF#4A0D6713.6:1 AA
Aa
#3D0A58#EADCF811.64:1 AA
Aa
#3D0A58#D7BFF09.11:1 AA
Aa
#3D0A58#C49EE86.8:1 AA
Aa
#3D0A58#F3EAFE13.03:1 AA
Aa
#3D0A58#FAF5FF14.15:1 AA

Colour family

Teal

Aa
#FFFFFF#0551608.93:1 AA
Aa
#055160#CFF4FC7.65:1 AA
Aa
#055160#9EEAF96.63:1 AA
Aa
#055160#6EDFF65.76:1 AA
Aa
#055160#E2F8FC8.11:1 AA
Aa
#055160#EFFCFE8.51:1 AA

Colour family

Orange

Aa
#FFFFFF#9A34127.31:1 AA
Aa
#4A2300#FFE5D011.34:1 AA
Aa
#4A2300#FFD8A810.21:1 AA
Aa
#4A2300#FFC0788.53:1 AA
Aa
#4A2300#FFEBD911.84:1 AA
Aa
#4A2300#FFF4EC12.67:1 AA

Colour family

Pink

Aa
#FFFFFF#9D174D7.88:1 AA
Aa
#4A1630#FCE7F312.33:1 AA
Aa
#4A1630#FBCFE810.49:1 AA
Aa
#4A1630#F9A8D47.99:1 AA
Aa
#4A1630#FDECF512.77:1 AA
Aa
#4A1630#FFF5FA13.59:1 AA

Your colours

Build your pairing

Try a preset

Contrast ratio

—
Checking

Sample heading

A considered digital experience.

Clear content gives people the confidence to read, decide, and move forward. Contrast is a small detail with a meaningful impact.

AA normal text—4.5:1 minimum
AA large text—3:1 minimum
AAA normal text—7:1 minimum
UI components—3:1 minimum

A quick guide

What the results mean.

AA

Everyday baseline

Use 4.5:1 for normal text and 3:1 for large text.

AAA

Higher clarity

A 7:1 ratio makes normal text easier to read in more situations.

3:1

Controls matter

Icons, focus states, borders, and inputs need enough contrast too.