格 千格 KiloCell

Colour Contrast Checker

Ensure that your content is clear and readable to all users, including persons with low vision and colour impairment

Current Contrast 4.02:1
Title Text (Large Text)
This is a real-time preview area. You can observe the visual effects of the currently selected colour combination in the actual layout. The higher the contrast, the easier the text is to be identified.
Normal Text (AA Level) Achieved
Normal Text (AAA Level) I can't pass.
Large text (AA Level) Achieved
Large text (AAA level) I can't pass.

Why is contrast critical to Web Accessibility (A11y)?

It's a problem that's easily ignored.

Designers tend to pursue “a higher sense” by using soft, low saturation colours. However, for users with impaired vision or under a strong light environment (e.g., outside mobile phone use), the text with a low contrast is almost unreadable.

Accessibility design standards

Web The Content Accessibility Guide (WCAG) provides a quantitative set of standards. By calculating the relative brightness of colours in mathematics, we can objectively assess the readability of content, thus ensuring that the message reaches every user.

WCAG 2.1 Standard Detailed Contrast

  • AA Level (minimal contrast) :
    • Normal text (18pt or 14pt plus below): at least the contrast is reached 4.5:1 。
    • Large text (18pt or 14pt plus above): contrast at least 3:1 。
  • AAA Level (Increased Contrast) :
    • Normal text: contrast at least 7:1 。
    • Large text: contrast at least 4.5:1 。

How does the contrast count?

The calculation of contrasts is based on colour Relative Luminance 。 Relative brightness is the value of relative integration in colour space to 0 (most dark) to 1 (most bright white). The formulae are as follows:

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

And L1 is the relative brightness of the brighter color, and L2 is the relative brightness of the darker color. Because the formula has been added 0.05 , the range of contrast ranges from 1:1 (same) to 21:1 (black and white limit comparison).

Recommendations of the designer

A comparison check was introduced at the beginning of the project. Do not wait until the design is completed, as this could undermine the already established visual balance. This tool allows for rapid adjustment of colour visibility (Value) to find a balance that meets accessibility requirements while maintaining brand colour (Hue). Remember that good contrasts not only serve the disabled, but also significantly enhance the reading experience and efficiency of all users.