WCAG Colour Contrast Checker
Accessible colour contrast helps visitors read your content and keeps your site aligned with WCAG guidelines. UK public sector and many private organisations expect AA compliance as a minimum. Use this checker to test foreground and background colour pairs before you finalise a design.
How to use this tool
- Enter hex or RGB values for text and background colours
- Review the contrast ratio and AA or AAA pass status
- Adjust the lighter or darker colour until you meet your target level
- Document approved pairs in your brand guidelines
When to get professional help
Contrast is one part of accessibility. Full audits cover keyboard navigation, screen reader structure and form labelling. We design mobile-first sites with accessibility built in. See our branding services or read our accessibility statement.
Sample heading text
Sample body copy for contrast preview. The quick brown fox jumps over the lazy dog.
Contrast ratio: 17.40:1
- WCAG AA normal text (4.5:1): Pass
- WCAG AA large text (3:1): Pass
- WCAG AAA normal text (7:1): Pass
Frequently Asked Questions
What contrast ratio is required for WCAG AA?
Normal text needs at least 4.5:1. Large text (18pt+ or 14pt bold) needs 3:1. AAA requires 7:1 for normal text.
Does this checker validate my entire website?
It tests the colour pair you enter. You should check every text and background combination used across buttons, links, headers and body copy.
Why does contrast matter for UK business websites?
Poor contrast excludes visually impaired users and can breach accessibility expectations under the Equality Act 2010 for many organisations.