GetMostReadable TypeScript Function for Web Accessibility

GetMostReadable TypeScript Function for Web Accessibility

Ensuring that text is easily readable on various backgrounds is a crucial part of web accessibility. In this post, we'll explore a simple TypeScript function called GetMostReadable, which determines the most readable text color (black or white) for a given HEX background color. We'll also delve into the principles of color theory and accessibility that underpin this function.

The Importance of Accessibility

Accessibility in web design ensures that content is available and understandable to as many people as possible, including those with visual impairments. Choosing the right color contrast between text and background is essential for readability.

Introducing the GetMostReadable Function

Here's a function that calculates the most readable color (black or white) based on a given HEX color:

function GetMostReadable(hexColor: string): string {
  // Convert HEX to RGB
  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hexColor = hexColor.replace(
    shorthandRegex,
    (m, r, g, b) => r + r + g + g + b + b
  );

  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor);
  const r = parseInt(result[1], 16);
  const g = parseInt(result[2], 16);
  const b = parseInt(result[3], 16);

  // Calculate the relative luminance
  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;

  // Return black or white depending on the luminance
  return luminance > 0.5 ? "black" : "white";
}

How to Use the GetMostReadable Function

// Example usage:
const hexColor = "#808080";
const fontColor = GetMostReadable(hexColor);
console.log(`The most readable color on this background is: ${fontColor}`);

How It Works

1. Convert HEX to RGB: The function first converts the HEX color into its RGB components.
2. Calculate Relative Luminance: Next, it calculates the relative luminance of the color using a formula that weighs the contribution of each color component to human perception.
3. Choose Black or White: Finally, based on the luminance, the function returns either 'black' or 'white', depending on which color would provide better contrast.

Color Theory and Accessibility

The GetMostReadable function leverages principles of color theory, particularly the concept of relative luminance. The coefficients used in the luminance calculation (0.299, 0.587, 0.114) reflect the different ways human eyes perceive color brightness.

Benefits of the GetMostReadable Color Function

• Enhanced Readability: By selecting the color that provides the highest contrast, the function enhances the readability of text on any background.
• Improved Accessibility: Making text easily readable is a key component of web accessibility, aligning with WCAG (Web Content Accessibility Guidelines) standards.
• Simplicity and Flexibility: The function is straightforward and can be easily integrated into any web development project, enhancing the overall user experience.

Wrapping Up

The GetMostReadable function is a powerful tool for developers looking to improve the accessibility and aesthetics of their websites or applications. By understanding and applying principles of color theory, this simple helper function offers an efficient solution to a common design challenge.

Designing with accessibility in mind is not only an ethical practice but also broadens the reach of content to a wider audience. Utilizing tools like the GetMostReadable function can make this task more manageable and effective.

Supporting My Work

Please consider Buying Me A Coffee. I work hard to bring you my best content and any support would be greatly appreciated. Thank you for your support!

Eric David Smith

Father / Software Engineer / Musician / Entrepreneur