Colour accessibility checker

Ensuring that your content is accessible to as many users as possible is a key responsibility of any web designer. One significant aspect of web accessibility is the contrast between text and its background. This is where this widget comes into play. It allows users to input a foreground and background colour in either HEX or RGB formats, and instantly checks if the contrast ratio between them meets the Web Content Accessibility Guidelines (WCAG) thresholds for different levels of text size and content.

The widget is a user-friendly tool designed to simplify the process of checking and ensuring that your colour combinations are in line with WCAG standards. You can input a foreground and background colour either as a HEX value (for example white as #FFFFFF) or as an RGB value (for example white as 255, 255, 255).

It then automatically calculates the contrast ratio between the foreground and background colours. The contrast ratio is a measure of how different the colours are in terms of brightness. A higher contrast ratio generally makes text easier to read. The formula used to calculate the contrast ratio is based on the relative luminance of the two colours, according to the WCAG’s guidelines. The result is a number ranging from 1:1 (no contrast, where both colours are identical) to 21:1 (maximum contrast, like black text on a white background).

The widget checks if the contrast ratio meets the different WCAG criteria for various text sizes:

• WCAG AA, normal text: A contrast ratio of at least 4.5:1 is required for normal text (typically 12pt or 16px).
• WCAG AA, large text: A lower threshold of 3:1 is allowed for large text (typically 18pt or 24px and larger).
• WCAG AAA, normal text: This is the strictest standard, requiring a contrast ratio of at least 7:1 for normal text.
• WCAG AAA, large text: A contrast ratio of at least 4.5:1 is needed for large text under the AAA guidelines.

By presenting the contrast ratio alongside its compliance status with the WCAG levels, the widget offers immediate insights into whether your design is accessible and what adjustments may be needed.

What are accessible colour contrasts

At its core, accessible colour contrast refers to the difference in luminance or brightness between the foreground elements (usually text) and the background behind them. Adequate contrast makes text easier to read, especially for individuals with visual impairments or colour vision deficiencies. This is not just a good practice, it’s an essential standard outlined by the WCAG, ensuring that web content is accessible to all users.

Without sufficient contrast, reading text can be extremely difficult, particularly for people with low vision, colour blindness, or even those using screens in harsh lighting conditions. This can lead to frustration, increased cognitive load, or even exclusion from accessing content altogether.

Why accessible colours matter

Colours are a fundamental part of design. They convey emotions, direct user attention, and can create a visually appealing interface. However, it’s easy to overlook the importance of accessible colours, especially when designing for a broad audience that includes users with varying visual abilities. Accessible colours ensure that your content is inclusive, reaching a wider audience and providing an equitable experience for everyone.

• Improving readability: The primary reason to ensure accessible colour contrast is to improve the readability of text. When the contrast between text and its background is too low, it becomes difficult for users to read, leading to increased eye strain and frustration. This is particularly important for individuals with low vision or other visual impairments.
• Inclusivity for users with visual impairments: Approximately 8% of men and 0.5% of women worldwide have some form of colour blindness, and millions more suffer from low vision due to age or other conditions. For these users, certain colour combinations can be virtually indistinguishable. By adhering to WCAG guidelines, you can ensure that your site is accessible to this segment of the population.
• Compliance with legal standards: In many countries, there are legal requirements for web accessibility. The WCAG guidelines are often used as the benchmark for determining whether a website is compliant with these laws. By using this widget to check your designs, you can avoid potential legal pitfalls and ensure that your site is meeting accessibility standards.
• Better user experience: Accessibility is not just about complying with standards, it’s about providing a better user experience for all visitors. When users can easily read and interact with your content, they are more likely to stay on your site, engage with your products or services, and convert into customers.

Tips for accessible colours

Even with a tool as helpful as this widget, it’s essential to follow some best practices when selecting colours for your website or app.

• Opt for high contrast: While the minimum requirement for normal text is a contrast ratio of 4.5:1, aiming for higher contrast is always a good idea. This ensures readability in a variety of conditions, such as on mobile devices in bright sunlight.
• Use colour palettes designed for accessibility: There are many tools and resources available that offer colour palettes specifically designed with accessibility in mind. These can be a great starting point for selecting colours that are both visually appealing and accessible.
• Test across different devices: Colours can appear differently depending on the device and screen settings. Always test your design across multiple devices to ensure that the contrast remains adequate in all situations.
• Don’t rely solely on colour: While contrast is important, it’s also vital to ensure that key information is not conveyed solely through colour. Use text labels, icons, or patterns to provide additional cues for users who may have difficulty distinguishing between certain colours.

Incorporating accessible colour contrast into your designs is a small step that can make a big difference in creating a more inclusive web for everyone. So, next time you’re working on a web project, take advantage of this widget and ensure your colours are doing their part in making the internet accessible to all.

What the result covers

The checker calculates the WCAG contrast ratio from the two selected opaque colours. AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively. Under WCAG, large text means at least 18 point, or 14 point when bold.

A passing ratio does not by itself make a design accessible. Font weight, size, anti-aliasing, gradients, images, transparency, hover and focus states, and colour-vision differences can affect the result in practice. The calculation also does not assess the newer APCA method. Both colours are stored in localStorage.

Related tools

• Colour converter: Easily convert colours between hex, RGB, HSL, CMYK, LCH, and more with this online tool. Save time, ensure consistency of your design.
• Colour palette generator: Discover a colour palette generator that instantly creates harmonious palettes using hex or RGB inputs based on colour theory formulas.

Further reading

• Web Content Accessibility Guidelines (WCAG) 2.2: Contrast (Minimum)
• Web Content Accessibility Guidelines (WCAG) 2.2: Contrast ratio
• W3C: CSS Colour Module Level 3

Widget made with staark