Contrast calculator – check color contrasts for accessibility

The contrast ratio between foreground and background color is crucial for accessible colors (or color combinations).
To be accessible, digital media (e.g., websites, PDFs) must meet various requirements. One of these requirements concerns the contrast ratio between the colors used. In Europe and many other parts of the world, the Contrast calculation according to WCAG which is explained below.

Conversion from HEX to RGB

The WCAG contrast calculation is based on the RGB color model in its numerical RGB representation (e.g. RGB(0, 125, 179)). In the digital world, however, colors are typically in HEX-coded form (e.g. #007db3) and must therefore first be converted to RGB values. Since the conversion from HEX to RGB is available as a standard function in most programming languages, the exact formula will not be explained further here. Instead, the following table shows the already calculated RGB values for two example HEX colors—one for the foreground and one for the background.

Normalization of RGB values

In the next step, the 8-bit RGB values from the original value range [0; 255] to the standardized range [0; 1] by dividing each of them by 255.

Linearization of color values

So far, you know that the calculation is based on the RGB color model. Now, let's add another piece of information: WCAG assumes color representation in the sRGB color space. But what exactly does that mean?

The sRGB color space is a standard that defines exactly how the individual RGB values are interpreted – that is, how these 3 numbers (e.g. RGB(0, 125, 179)) ultimately look on the screen, especially in terms of brightness and color perception.

What many people don't know: RGB values are not linear in the sRGB color space. This means that a value of 128 on a scale of 0 until 255 not half the brightness of a value of 255 corresponds.
The reason for this is a process called gamma coding, which adjusts the values to the human eye's perception. While this makes sense for display on screens, it leads to incorrect results in mathematical calculations—such as determining brightness or contrast ratio.
Therefore, the RGB values must first (after IEC/4WD 61966-2-1 – a standard that is subject to a fee). Only through this step do they correctly reflect the actual light intensity and can be used as a basis for calculating relative luminance.
The RGB values are linearized using the following formula:

Calculating relative luminance

After the sRGB values have been normalized and linearized, we can now calculate their relative luminance according to WCAG The relative luminance is the brightness of a color, adjusted to human perception. Since the human eye, for example, perceives green more intensely than red or blue, the green component of the color plays a greater role in the brightness calculation. The scale ranges from 0 (Black) to 1 (White).

L = 0.2126∙R lin + 0.7152∙G lin + 0.0722∙B lin

Calculating the contrast ratio

From the relative luminances of two colors, the Contrast ratio calculate as defined by WCAG:

It should be noted that the lighter color _L1 always in numerator so that the contrast ratio is always uniform ≥ 1.0 is.

The contrast ratio calculated in this example of 4.5 : 1 By the way, it fulfills the WCAG AA level. The chosen color combination is therefore “barrier-free colors.”

The term "color contrast" is not clearly defined. Depending on the context (e.g., color theory, photography, fashion, accessible design, etc.), it can refer to very different things. In accessible design, "color contrast" is the colloquial term for technically clearly defined “contrast”This is measurable and refers to the Brightness difference (luminance) between two colors – regardless of the shade.
The goal is to choose the highest possible contrast so that all content is easily visible and readable.

But be careful: High contrast doesn't depend on how different colors appear, but solely on their difference in brightness. For example, a light and a dark shade of blue can create a very high contrast – even though they are the same color. Conversely, an intense red next to a strong green can be difficult to read despite their strong color impact if both colors have a similar brightness.
The example image shown below clearly illustrates this difference.

 

High color contrast is particularly important in accessible design because it ensures that content is perceptible and usable for everyone. Color contrast plays a key role in how well information on a website or in a document can be perceived. Especially with digital content, the readability of text, the recognizability of controls, and the comprehensibility of graphics depend heavily on contrast.
Too little contrast can lead to content being overlooked or misunderstood – especially for people with impaired vision. However, even users without impairments benefit from clear contrast, for example, in poor lighting or on mobile devices outdoors.
Therefore, color contrast is not just a design aspect, but a key criterion for digital accessibility and usability.

All content that actually serves a functional purpose is relevant. This can include text, images, diagrams, icons, and controls. However, the contrast between text and background is particularly important, as text constitutes the main content of many websites and documents. Interactive elements such as forms or buttons must also be clearly visible to be used reliably.

Pure design elements or decorative graphics do not fall under this category – they have no content-related function and therefore do not have to meet minimum contrast requirements.

Minimum contrasts in accessible design are primarily intended to support people with limited vision – for example, those with age-related visual impairment, cataracts or color blindness such as red-green color blindness.

But even people without visual impairments benefit enormously. Ask yourself: Have you ever had trouble reading content on a display in strong sunlight? High color contrast can make all the difference even in such everyday situations.

Therefore, color contrast not only plays a major role in accessible design – high contrast optimizes usability for everyone!

Insufficient color contrast between the foreground and background can significantly impair perception and readability – even for people without visual impairments. This is particularly true for content that needs to be quickly understood or interactive.

Disadvantages of poor contrast ratio:

• Poor readability of continuous text, especially in small font sizes
• Increased cognitive load and faster fatigue when reading
• Errors in data entry, e.g., in forms
• Higher risk of overlooking content (e.g. buttons, links, error messages)
• Important calls to action (e.g. “Buy now” in light grey on white) may not be noticed – which can directly lead to lost sales
• Higher bounce rate, especially on mobile devices or in difficult lighting conditions
• Exclusion of people with visual impairments
• Possible violation of law (BFSG and BITV)
• Accessible labels or seals of approval (e.g. BITV certification) cannot be achieved

Adequate color contrast not only improves accessibility but also generally increases the usability and visual clarity of content – on all devices and for all user groups.

Advantages of a good contrast ratio:

• Better readability of texts in all font sizes
• Lower cognitive load and better user satisfaction
• Increased findability of important elements such as buttons or links
• Safer and faster operation of forms and interactive areas
• Positive influence on dwell time, conversion rate and user loyalty
• Improved usability in unfavorable lighting conditions (e.g. sunlight)
• Accessibility for people with visual impairments
• Legal compliance

Despite clear technical definitions and guidelines surrounding color contrast, some misunderstandings persist in practice – especially in design processes. The following statements sound familiar, but often lead to non-accessible results:

• "Light gray is fashionable" → That's true – but only if the contrast is sufficient. Fashionable design shouldn't come at the expense of readability.
• “Contrast is a matter of taste” → No – contrast is clearly measurable and objectively verifiable according to WCAG.
• "My target audience has good vision" → Accessible design not only benefits people with visual impairments. It also increases usability for everyone.
• “It’s just a design question.” → No – color contrast not only affects aesthetics, but also the perceptibility and usability of content.

These and similar statements quickly lead to contrast requirements being underestimated or ignored – with negative consequences for usability and accessibility.