Ensuring Text Readability with Proper Color Contrast: WCAG Standards, Tools, and Implementation

Text readability is a core concern in web design, and the contrast between text color and background color directly impacts how easily users can read content.

Problem Origin: Rescue Your Unreadable Page Designs

Insufficient contrast makes text hard to distinguish, as shown by examples of internal company tools with low‑contrast colors.

1. Contrast Standard

The WCAG defines contrast ratios ranging from 1:1 to 21:1. AA level requires a minimum of 4.5:1 for normal text and 3:1 for large text; AAA level requires 7:1 and 4.5:1 respectively.

Contrast Level

Normal Text

Large Text

AA

4.5:1

3:1

AAA

7:1

4.5:1

2. Tools for Adjusting Contrast

Online Color Contrast Calculator – instantly shows the ratio between any two CSS colors.

Chrome DevTools – select a text element, open the color picker, and use the "Contrast" radio button for live feedback.

JavaScript library TinyColor – provides tinycolor.readability() and tinycolor.isReadable() functions.

tinycolor.readability('#000', '#111'); // 1.1121
tinycolor.isReadable('#ff0088', '#5c1a72', {level:'AA', size:'small'}); // false
tinycolor.isReadable('#ff0088', '#5c1a72', {level:'AA', size:'large'}); // true

3. Practical Tips

Use semi‑transparent black or white text on colored backgrounds to let the text color blend automatically (Material Design technique).

Avoid colorful body text; reserve colors for interactive elements like buttons and links.

Apply different opacity levels to distinguish headings, body, captions, and icons.

When backgrounds are complex (gradients, images), compute an average background color or add an overlay mask.

4. Algorithm Exploration and Optimization

Material Design’s Sass functions calculate luminance and contrast. The key functions are:

@function mdc-theme-luminance($color) { /* calculates relative luminance */ }
@function mdc-theme-contrast($back, $front) { /* returns contrast ratio */ }
@function mdc-theme-contrast-tone($color) { /* returns "light" or "dark" */ }

These functions compare the contrast of a given color against white and a semi‑transparent black (rgba(black, .87)) and decide whether the color is light or dark.

4.1 Supporting Semi‑Transparent Colors

To handle rgba inputs, an alpha‑composition algorithm mixes the foreground with the background:

function mixColor(front, back) {
  var rgbFront = tinycolor(front).toRgb();
  var rgbBack  = tinycolor(back).toRgb();
  var a = rgbFront.a;
  var r = a * rgbFront.r + (1 - a) * rgbBack.r;
  var g = a * rgbFront.g + (1 - a) * rgbBack.g;
  var b = a * rgbFront.b + (1 - a) * rgbBack.b;
  return tinycolor({r:r,g:g,b:b}).toHexString();
}

4.2 Adjustable Minimum Contrast

The original Sass hard‑codes a minimum contrast of 3.1. The JavaScript version allows a custom threshold:

function contrast(color, minContrast) {
  var minimum = minContrast || 3.5;
  var light  = getContrast(color, '#fff');
  var dark   = getContrast(color, '#000');
  return (light < minimum && dark > light) ? 'light' : 'dark';
}

4.3 Full Implementation

The complete source, including the above optimizations, is available at github.com/dwb1994/lightordark .

References

Android Accessibility – Color Contrast: https://support.google.com/accessibility/android/answer/7158390

iOS Human Interface Guidelines – Accessibility: https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/accessibility/

Material Design – Text Legibility: https://material.io/design/color/text-legibility.html#legibility-standards