Post

Understanding Color Contrast and Its Impact on Human Eyes

Posted
By thanhtunguet
3 min read

Color contrast plays a crucial role in the readability and accessibility of digital content. According to IBM research on color and human eyes, the right contrast between text and background colors is essential to ensure that the content is legible for users, including those with visual impairments.

How Color Contrast Interacts with Human Eyes

  1. Luminance and Perception: The human eye perceives color through luminance, which is a measure of the amount of light that a color emits or reflects. Colors with similar luminance can blend together, making it difficult to distinguish between them.

  2. Contrast Ratio: The contrast ratio is a numerical value that describes the difference in luminance between two colors. The World Wide Web Consortium (W3C) recommends a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text to ensure readability.

  3. Accessibility: Adequate contrast is vital for users with visual impairments, such as color blindness or low vision. High contrast helps to ensure that all users can perceive and interact with the content effectively.

Creating a Flutter Function to Determine Background Color

To implement a Flutter function that finds an appropriate background color given a text color, we need to consider the following steps:

  1. Calculate Luminance: Compute the luminance of the given text color.
  2. Determine Contrast Ratio: Use the contrast ratio formula to find a background color that provides sufficient contrast.
  3. Adjust Background Color: Iteratively adjust the background color to meet the minimum contrast ratio requirement.

Here’s the Flutter function to achieve this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

import 'package:flutter/material.dart';
import 'dart:math';

/// Calculate the luminance of a [Color] object.
double calculateLuminance(Color color) {
  double r = color.red / 255.0;
  double g = color.green / 255.0;
  double b = color.blue / 255.0;

  // Apply gamma correction
  r = r <= 0.03928 ? r / 12.92 : pow((r + 0.055) / 1.055, 2.4);
  g = g <= 0.03928 ? g / 12.92 : pow((g + 0.055) / 1.055, 2.4);
  b = b <= 0.03928 ? b / 12.92 : pow((b + 0.055) / 1.055, 2.4);

  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

/// Calculate the contrast ratio between two [Color] objects.
double contrastRatio(Color textColor, Color backgroundColor) {
  double textLuminance = calculateLuminance(textColor);
  double backgroundLuminance = calculateLuminance(backgroundColor);
  double lighter = max(textLuminance, backgroundLuminance);
  double darker = min(textLuminance, backgroundLuminance);

  return (lighter + 0.05) / (darker + 0.05);
}

/// Determine a background color that meets the contrast ratio constraint.
Color findBackgroundColor(Color textColor) {
  double minContrastRatio = 4.5; // Minimum contrast ratio for normal text

  double textLuminance = calculateLuminance(textColor);
  Color backgroundColor = Colors.white;
  double backgroundLuminance = calculateLuminance(backgroundColor);
  double currentContrastRatio = contrastRatio(textColor, backgroundColor);

  while (currentContrastRatio < minContrastRatio) {
    backgroundLuminance -= 0.01;
    if (backgroundLuminance < 0) {
      backgroundLuminance = 0;
      break;
    }

    int newR = (backgroundLuminance * 255).round();
    backgroundColor = Color.fromARGB(255, newR, newR, newR);
    currentContrastRatio = contrastRatio(textColor, backgroundColor);
  }

  return backgroundColor;
}

void main() {
  Color textColor = Color(0xFF6929C4); // Example text color
  Color backgroundColor = findBackgroundColor(textColor);

  print('Recommended background color: ${backgroundColor.toString()}');
}

Explanation of the Function

  1. Luminance Calculation: The calculateLuminance function computes the luminance of a given color using the gamma correction formula.

  2. Contrast Ratio Calculation: The contrastRatio function determines the contrast ratio between the text color and a background color.

  3. Background Color Adjustment: The findBackgroundColor function iteratively adjusts the background color’s luminance to ensure it meets the minimum contrast ratio of 4.5:1 for normal text. It starts with a high-luminance background color (white) and decreases its luminance until the desired contrast ratio is achieved.

Conclusion

Ensuring proper color contrast is essential for accessibility and readability in digital content. By understanding the principles of luminance and contrast ratios, developers can create user interfaces that are both visually appealing and accessible to a broader audience. The provided Flutter function demonstrates how to programmatically determine an appropriate background color to maintain readability based on a given text color.

Mobile Development, Flutter
Mobile Development Flutter
This post is licensed under CC BY 4.0 by the author.