Free tools
Colour Contrast checker
The Colour Contrast Checker helps to evaluate the contrast ratio between two colours to ensure readability and compliance with accessibility standards like WCAG.
Results
AA
AAA
Aa
Normal Text
Aa
Large Text
Design Elements
Your Colours
Find nearest:
Reverse
Current Contrast Ratio
0.00
How to use the Colour Contrast Checker?
To check colour contrasts simply enter the hex codes or use the colour selector to choose your two desired colours. The checker instantly displays the results, showing whether the contrast meets WCAG compliance standards. These results are highlighted for small text, large text, and design elements.
If your chosen colours don’t meet the required standards, the tool suggests the closest compliant colour that meets AA or AAA guidelines. You can also use the ‘reverse’ button to swap the foreground and background colours.
Finally, the tool provides a preview section where you can see how your selected colours appear in titles, paragraphs, form fields, and buttons.
Why is WCAG compliance colour contrast important?
Ensuring WCAG-compliant colour contrast isn’t just about aesthetics – it’s about accessibility. For users with visual impairments, including colour blindness and low vision, contrast can be the difference between clear readability and complete inaccessibility.
By adhering to WCAG guidelines, websites not only enhance inclusivity but also improve user experience and comply with legal accessibility standards. However, compliance exists on different levels, each with its own success criteria:
- WCAG Level AA: Requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and design elements.
- WCAG Level AAA: A more rigorous standard, demanding a contrast ratio of 7:1 for normal text and 4.5:1 for large text.
Prioritizing colour contrast isn’t just a best practice, it’s a commitment to inclusivity.
Accessibility Resources
Learn More About Digital Accessibility and Online Inclusion
Need help making your website accessible?
Discover a wealth of online accessibility resources to help you create inclusive digital experiences for all users.
-
WCAG Fix It: 4.1.2 Name, Role, Value
Read more: WCAG Fix It: 4.1.2 Name, Role, ValueIf your website has buttons, forms, menus, dropdowns, or interactive components, WCAG 4.1.2 applies to you. In this WCAG Fix It guide, we’re breaking down one of the most technical-sounding, yet critically important accessibility requirements: ensuring that interactive elements have a proper, programmatically defined name, role, and value. It sounds developer-heavy burut at its core,
-
WCAG Fix It: 3.3.2 Labels or Instructions
Read more: WCAG Fix It: 3.3.2 Labels or InstructionsIf your website has forms, contact forms, checkout forms, booking forms, login forms, WCAG 3.3.2 applies to you. In this WCAG Fix It guide, we’re breaking down one of the most common and preventable accessibility failures: missing labels or unclear instructions. When users don’t know what information is expected in a field, forms become frustrating,
-
WCAG Fix It: 3.1.1 Language of Page
Read more: WCAG Fix It: 3.1.1 Language of PageIf your website has text and they all do, WCAG 3.1.1 – Language of Page applies to you. In this WCAG Fix It guide, we’re breaking down a technical requirement that has a huge impact on accessibility: ensuring the primary language of your web page can be programmatically determined. It’s one line of code, but
Scan, Detect, and Fix Accessibility
Issues Powered with Ai
Get a free AI-powered accessibility audit and uncover hidden barriers
that may exclude users with disabilities. Click the link below to scan now.