Free Accessibility Tool
Colour contrast checker
Enter your text colour and background colour below to see if your colour combination is accessible and compliant for those with visual impairments.
Website Accessibility Checker
Find out if your site is accessible for people with disabilities and meets the ADA, WCAG, and other requirements.
How Does a Colour Contrast Checker Work?
Colour contrast — which is the difference in colour between two elements — influences how well users read and navigate a website. For users with visual impairments, including low vision, cataracts, or colour blindness, colour contrast significantly influences their experience. The lower the contrast, the more difficult it can be for these individuals to navigate a page.
A colour contrast checker ensures web pages are accessible by determining whether they meet WCAG colour contrast requirements.
Understanding Contrast Ratios
WCAG has two levels of contrast ratios:(opens in a new tab)
Level AA: The minimum contrast level is 4.5:1.
Level AAA: Enhanced contrast has a ratio of 7:1.
It’s recommended organisations provide higher-contrast text and images where possible; however, Level AA is the required standard for website accessibility.
Here’s the bottom line: the more contrast you have between your text and UI elements and background colours, the more accessible it is for everyone.
Try our tool below to test colours' contrast.
Tips on Using Accessible Colours and Colour Contrast on Your Website
Choose the Right Colour Scheme
A colour scheme is a combination of hues that are implemented in specific design contexts, such as a site’s layout. Colour plays an important role in making your content accessible to people with visual impairments. Web colour accessibility in design considers your audience and any condition or disability they may have in perceiving pigmentation.
When it comes to creating an accessible website, colour choice matters. Including accessible hues in your design palette will make your site more usable to people who may have vision impairment or low vision.
The Web Content Accessibility Guidelines (WCAG) outline various recommendations for colour accessibility, including guidance for colour contrast ratios, luminance, backgrounds, and colour spacing in order to make a site more accessible to those with any type of vision deficiency. The following aspects of website colour schemes can help you design with accessibility in mind.
Aim For a Contrast Ratio of 4.5:1 or Higher
A colour contrast ratio determines how bright or dark colours appear on a screen. They can range from 1 to 21 (written as 1:1 and 21:1, respectively). The first number in the ratio indicates the relative luminance (or brightness) of the light colours, and the second represents the relative luminance of dark colours. WCAG recommends using 4.5:1 as the minimum ratio for text and interactive elements.
Find Visually Friendly Colour Combinations
Choose colour combinations by focusing on background colours, text and typeface colours, calls to action (CTAs), and buttons.
Here’s a few dos and don’ts to help:
DO:
Start the process by identifying your primary brand colour
Remember certain colours tend to hold certain meanings
Aim for more white space to help boost readability
Use varying saturations of your brand’s main hues to increase brand loyalty
DON'T:
Let a colour combination get in the way of readability
Use low-contrast text — it can strain the eyes and make your page less accessible
Use a digital black typeface or pure black on a pure white background — the stark contrast may cause eye strain
Remember additional factors such as screen resolution, brightness levels, and device types also affect site readability. Test colours on various platforms to ensure they’re adjusted for optimal readability on different devices.
Know the Colour Contrast Accessibility Exceptions
There are some exceptions to the colour accessibility guidelines outlined by WCAG:
Colour contrast ratio requirements are not mandated for logos or incidental graphic elements because they are not necessarily essential for the user to understand the content or functionality.
Text that is part of a logo does not have a minimum contrast requirement.
Text that is part of disabled buttons does not need to meet the minimum contrast ratio. While there are a few exemptions, try your best to follow best practices to avoid any accidental violations of colour accessibility in web design.