ITS AAA Colour Picker
Check and perfect your colour contrast to meet WCAG AAA standards.
Use this tool to evaluate the contrast between foreground and background colours, ensuring your designs are accessible to all users. Input your colours in HEX format or use the colour pickers to select them visually.
After checking the contrast ratio, the tool will indicate if your colour combination meets WCAG 2.2 compliance levels for normal and large text. If the colours do not meet the required standards, suggested adjustments will be provided to help you achieve compliance.
------------------------------
Contrast Ratio
—
WCAG Compliance
| Criteria | Result |
|---|---|
| AA (Normal Text) | |
| AA (Large Text) | |
| AAA (Normal Text) | |
| AAA (Large Text) |
Suggested Adjustments
Light Theme
Dark Theme
About WCAG 2.2:
The Web Content Accessibility Guidelines (WCAG) define how to make web content more accessible to people with
disabilities.
AA compliance means text has sufficient contrast for most users, while AAA compliance meets
enhanced contrast requirements for users with low vision or in difficult viewing conditions.
Learn more at WCAG
2.2
Quick Reference.
For further reading at w3.org/WAI.
AAA Colour Picker FAQ
What does this tool do?
The ITS AAA Colour Picker helps designers and developers create colour combinations that meet WCAG 2.2 AAA contrast standards. It calculates contrast ratios between text and background colours, ensuring readability and accessibility for all users.
What are WCAG 2.2 AA and AAA?
The Web Content Accessibility Guidelines (WCAG 2.2) define measurable levels of colour contrast to make text legible for users with visual impairments:
- AA: requires a ratio of 4.5:1 for normal text.
- AAA: requires a ratio of 7.0:1 for enhanced readability.
This tool focuses on achieving AAA — the gold standard for contrast compliance.
How are “Suggested Adjustments” calculated?
Unlike other checkers that simply brighten or darken colours, this tool uses a custom algorithm called the Harmony Engine v2.2. It preserves hue, balances light and dark adjustments, and keeps your brand palette as close as possible to the original while reaching AAA contrast.
Who built this tool?
The AAA Colour Picker and Harmony Engine were designed and
developed by TeamKB — Kai and Ben.
Built as part of ITS Group’s accessibility and design ecosystem,
it’s a free resource to promote better, more inclusive digital design.
Can I use this for my brand palette?
Absolutely! Input your brand colours, check the results, and use the suggested adjustments to refine your palette without sacrificing accessibility or visual harmony.
Have suggestions or feedback?
💡 If you have suggestions for improvement, please reach out to us at
info@itsgroup.co.nz.
Every great tool starts with a conversation — let’s make the web brighter, together.