Contrast checker for WCAG AA and AAA
Quickly check if your colours meet WCAG requirements. Enter text and background colour and see if your contrast meets AA and AAA standards for web accessibility.
Contrast checker
What is contrast ratio?
Contrast ratio (or contrastratio) is a number that describes the difference in brightness between two colours - typically text and background. The ratio is expressed as e.g. 4.5:1 or 21:1, where the first number indicates how many times lighter the lightest colour is compared to the darkest. The higher the number, the greater the contrast. The maximum contrast ratio is 21:1 (black on white), while 1:1 means no contrast (identical colours).
What is WCAG?
WCAG stands for Web Content Accessibility Guidelines and are international guidelines developed by W3C (World Wide Web Consortium). WCAG ensures that digital content is accessible to everyone - including people with visual impairment, colour blindness or other disabilities. The guidelines are used worldwide and form the basis for web accessibility legislation in both the EU and Denmark.
What do AA and AAA mean?
WCAG operates with three overall levels of accessibility: A, AA and AAA.
WCAG AA
- Normal text: Minimum 4.5:1
- Large text: Minimum 3:1
- Description: The minimum requirement for most websites and apps. Meets legal requirements in the EU.
WCAG AAA
- Normal text: Minimum 7:1
- Large text: Minimum 4.5:1
- Description: Highest level - recommended for public services and maximum accessibility.
Large text is defined as text of at least 18pt (24px) or 14pt bold (18.5px bold).
Why is contrast important?
Adequate colour contrast is essential:
- Readability - Text becomes easier to read for all users
- Accessibility - People with low vision or colour blindness can navigate your content
- Legal requirements - EU Accessibility Directive requires WCAG AA compliance for many digital services
- User experience - Good contrast enhances the experience on all devices and in all lighting conditions
How to use the contrast checker
- Choose your text colour by entering a HEX code or using the colour picker
- Choose your background colour In the same way
- See the result instantly - The tool automatically calculates the contrast ratio and shows if the combination complies with WCAG AA and AAA for both normal and large text
All calculations are done locally in your browser - fast, secure and without saving data.
Who benefits from this tool?
The contrast checker is designed for web designers, UX designers, front-end developers and anyone working with digital interfaces. It is also relevant for Companies and organisations, that need to fulfil digital accessibility requirements - including public institutions, e-commerce companies and SaaS providers.
