Colour Accessibility Guide: How to Choose Colours That Everyone Can Read

1. It makes text easier to read

Text is one of the most important parts of a website. Visitors need to read headings, instructions, product descriptions, navigation links, and form labels without unnecessary effort.

When the text and background have insufficient contrast, even a well-written page can become difficult to use. Following contrast recommendations helps make written content more legible across a wider range of viewing conditions.

2. It supports people with visual impairments

People experience colour and contrast differently. Some have colour vision deficiencies, while others have low vision or conditions that make it harder to distinguish details.

A colour combination that looks perfectly clear to one person may be difficult for another to interpret. Accessible colour choices help reduce these barriers, although colour contrast alone cannot address every accessibility need.

3. It helps users understand information correctly

Colour often communicates meaning. A red message may indicate an error, green may suggest success, and a coloured chart may distinguish different categories.

However, relying on colour alone can make this information inaccessible. Adding text labels, icons, patterns, or other visual indicators gives users another way to understand the message.

For instance, a form should display a clear error message beside an invalid field rather than relying only on a red border.

4. It improves the usability of websites and applications

Accessible colour choices can benefit many users, not just people with diagnosed visual conditions. Someone using a phone outdoors, viewing a screen in bright light, or working with a dim display may also struggle with low-contrast content.

Clearer text, identifiable controls, and visible focus indicators make interfaces easier to navigate.

5. It helps teams create more consistent designs

Designers and developers often work with shared colour palettes across websites, applications, dashboards, and design systems. Checking accessibility early helps teams identify problematic combinations before they appear across multiple pages.

A documented palette can specify which text colours work on which backgrounds, reducing guesswork and making future updates easier.

6. It supports accessibility standards

WCAG provides recognised criteria for evaluating web accessibility. Its colour-related requirements give designers and developers practical benchmarks for assessing contrast and ensuring that colour is not the only way information is communicated.

Meeting individual contrast requirements is an important step towards accessibility, but it does not automatically make an entire website accessible.

What is a HEX colour code?

A HEX colour code represents colour using hexadecimal notation. In the common six-digit format, it contains three pairs of characters representing red, green, and blue.

For example:

#3B82F6

This colour has the following RGB values:

• Red: 59
• Green: 130
• Blue: 246

HEX is widely used in web design because it provides a compact way to specify colours in CSS. Shorter three-digit HEX notation is also available for certain colours, while eight-digit notation can include an alpha channel for transparency.

What is RGB?

RGB stands for red, green, and blue. It describes colours by specifying the intensity of these three components, generally using values from 0 to 255 for standard eight-bit RGB channels.

For example:

rgb(59, 130, 246)

This represents the same colour as #3B82F6. The two notations differ, but they describe the same RGB colour when interpreted in the same colour space.

If you need to convert a HEX value into its numerical components, use the HEX to RGB converter. If you already have RGB values and need their hexadecimal equivalent, use the RGB to HEX converter.

These conversions are useful when moving between design software, CSS, development tools, and other digital workflows.

What is CMYK?

CMYK stands for cyan, magenta, yellow, and key (black). Unlike RGB, which combines light to create colours on digital displays, CMYK uses ink to produce colours in print.

This distinction matters when preparing website colours for printed materials. A colour displayed on a monitor may not look exactly the same when printed because the two systems use different methods of reproducing colour.

A HEX-to-CMYK conversion can provide an approximate starting point for print preparation. However, the final appearance depends on the printing process, ink, paper, and colour profile. For important brand materials, check the converted values with the printer or the relevant print-production workflow.

What does HEX to ASCII mean?

HEX to ASCII is different from converting a colour between HEX and RGB.

HEX is also used to represent bytes of data, and those bytes can correspond to ASCII characters. For example, the hexadecimal byte 41 represents the uppercase letter A in ASCII.

However, a colour code such as #3B82F6 is a representation of colour components, not an ordinary ASCII text string. Treating its digits as character codes would not convert the colour into another colour format.

Understanding this distinction helps avoid confusion when searching for tools related to HEX conversions.

What is a HEX calculator?

A HEX calculator can refer to a tool that performs calculations or conversions involving hexadecimal values. Depending on its features, it may help users interpret hexadecimal numbers, convert values, or work with colour codes.

For colour accessibility, the important task is not simply converting a code. You also need to compare the foreground and background colours, calculate their contrast ratio, and check whether the combination meets the relevant WCAG requirement.

A conversion tool and a contrast checker therefore serve different purposes, even when both work with HEX values.

Step 1: Identify the foreground and background colours

Start by identifying the two colours you want to compare. For ordinary text, the foreground is the text colour and the background is the colour behind it.

For example, you might want to check whether dark grey text is readable on a light grey background.

Record both colours using their HEX or RGB values. A HEX calculator or colour-conversion tool can help you obtain the RGB components if necessary.

Step 2: Convert the RGB components to values between 0 and 1

For standard eight-bit RGB colours, divide each channel value by 255.

For example, white has RGB values of (255, 255, 255). Each component becomes:

• Red: 255 ÷ 255 = 1
• Green: 255 ÷ 255 = 1
• Blue: 255 ÷ 255 = 1

Black has RGB values of (0, 0, 0), so all three components become 0.

This normalisation is the first part of the relative-luminance calculation.

Step 3: Convert each RGB component to linear light

RGB values used in standard web colours are encoded nonlinearly. Therefore, you cannot calculate WCAG relative luminance accurately by inserting the original RGB values directly into the luminance formula.

For each normalised component, apply the following conversion:

• If the value is 0.04045 or less, divide it by 12.92.
• Otherwise, add 0.055, divide by 1.055, and raise the result to the power of 2.4.

Apply this calculation separately to the red, green, and blue components.

This step converts the encoded sRGB components into linear-light values used by the WCAG formula.

Step 4: Calculate relative luminance

Once the three components have been converted, calculate relative luminance using the following formula:

L = 0.2126R + 0.7152G + 0.0722B

Here, R, G, and B are the linear-light values from Step 3.

The coefficients give different weights to the three channels. Green contributes the most to this calculation, followed by red and then blue.

Repeat the calculation for both the foreground and background colours. You will now have two relative-luminance values.

Step 5: Place the lighter value above the darker value

Compare the two luminance values. The larger value becomes L1, and the smaller becomes L2.

This order matters because the WCAG contrast formula always places the lighter colour in the numerator and the darker colour in the denominator.

Step 6: Calculate the contrast ratio

Add 0.05 to each luminance value, then divide the larger result by the smaller one.

For example, consider pure white text against a pure black background.

• White relative luminance: 1
• Black relative luminance: 0

The calculation is:

(1 + 0.05) ÷ (0 + 0.05) = 21

The contrast ratio is therefore 21:1, the highest possible ratio under this formula.

Step 7: Compare the result with WCAG requirements

Once you have the contrast ratio, compare it with the relevant accessibility threshold.

For WCAG contrast purposes, large text generally means at least 18-point regular text or 14-point bold text, approximately 24 CSS pixels and 18.67 CSS pixels, respectively.

If the ratio falls below the applicable minimum, adjust the foreground colour, the background colour, or both, then calculate the ratio again. Do not assume that two colours are accessible simply because they look different.

These thresholds relate to specific WCAG success criteria, and some exceptions apply. Check the official WCAG 2.2 guidelines for the complete requirements.

Choose text colours with sufficient contrast

Start with body text, navigation links, form labels, and other content that users need to read. Check each foreground and background combination instead of testing only the main brand colours.

For example, a pale blue may work well as a decorative background but fail when used for small text on white.

Do not rely on colour alone

If a chart uses different colours to represent categories, add labels, patterns, or other distinguishable indicators. Similarly, use text alongside colour-coded success messages, warnings, and errors.

This helps users understand the content even if they cannot distinguish the colours.

Check buttons, icons, and focus indicators

Text is not the only element that needs attention. Under WCAG 2.2 Level AA, visual information required to identify active user-interface components and meaningful graphical objects generally needs a contrast ratio of at least 3:1 against adjacent colours.

Test relevant button boundaries, icons, and focus indicators where the criteria apply. A control should not become difficult to identify simply because its outline blends into the background.

Test the colours in their actual context

A colour that works on a white background may not work on a coloured card. Likewise, a transparent text or background colour can produce different results depending on what lies behind it.

Check the final foreground and background combination as it will actually appear. Also consider font size, font weight, spacing, and the visual hierarchy of the page.

Test more than one type of visual experience

Where possible, review your design using accessibility inspection tools and simulations of different colour vision deficiencies. These checks can help reveal combinations that are difficult to distinguish.

However, simulations do not represent every person's experience and cannot replace contrast measurements or usability testing.

Document accessible colour combinations

For a website or design system, record which text colours are approved for which backgrounds. This is particularly useful when several people create pages or components using the same brand palette.

A shared set of tested combinations makes accessibility easier to maintain as the design evolves.

Assuming different colours automatically have good contrast

Two colours can look different in hue yet have similar relative luminance. For example, certain red and green combinations may be difficult to distinguish for some users.

Always check the contrast ratio instead of relying on visual judgement alone.

Using light grey text for everything

Light grey can create a subtle visual style, but it may reduce readability when used for small text against a white background. Check secondary labels, placeholder text, captions, and disabled-looking elements rather than testing only the main paragraph text.

Treating HSL lightness as relative luminance

HSL describes colours using hue, saturation, and lightness. However, the lightness component is not the same as the relative luminance used in the WCAG contrast formula.

A colour with a particular HSL lightness value does not automatically meet an accessibility threshold.

Assuming HEX-to-RGB conversion improves accessibility

Converting #3B82F6 to rgb(59, 130, 246) changes the notation, not the underlying colour. The conversion can make the colour easier to use in a particular workflow, but it does not by itself increase contrast.

Accessibility depends on the relationship between the foreground and background colours.

Ignoring transparency

A colour with an alpha channel may look different depending on the background behind it. Test the final rendered colours rather than assuming that a HEX value with transparency has one fixed appearance in every context.

Communicating errors with colour alone

A red border may help identify an invalid field, but it should not be the only indication. Add a clear error message and, where appropriate, an icon or another visual cue.

Assuming one successful contrast test proves full accessibility

Contrast is only one part of accessible design. Keyboard navigation, visible focus, text resizing, meaningful labels, and other requirements still need to be considered.