Colour Selection
Text Colour
Background Colour
Contrast Ratio
21:1
PASS WCAG AA (Normal Text)
Minimum ratio: 4.5:1
PASS WCAG AAA (Normal Text)
Enhanced ratio: 7:1
PASS WCAG AA (Large Text)
Minimum ratio: 3:1 (18pt+ or 14pt+ bold)
PASS WCAG AAA (Large Text)
Enhanced ratio: 4.5:1
Quick Presets
Live Preview
Heading Text
This is normal body text. It should be easy to read with good contrast. The WCAG recommends a minimum contrast ratio of 4.5:1 for normal text.
This is smaller text (14px). It requires the same 4.5:1 ratio for AA compliance.
Large bold text (18pt+) only needs 3:1 for AA.
Why This Matters
- People with low vision need high contrast
- Colourblind users rely on contrast, not just colour
- Bright sunlight makes low contrast unreadable
- Accessibility is about inclusion, not compliance
Colourblind Simulation
How your colour combination appears to people with different types of colour vision deficiency:
Protanopia (Red-blind)
Sample Text
Deuteranopia (Green-blind)
Sample Text
Tritanopia (Blue-blind)
Sample Text
Achromatopsia (Total)
Sample Text
~8% of men and ~0.5% of women have some form of colour vision deficiency. Red-green colourblindness is most common.