GetMostReadable TypeScript Function for Web Accessibility

Posted in category Code Snippets on
561 Words ~3 Minute Reading Time • Subscribe to receive updates on Code Snippets
Eric David Smith
Software Engineer / Musician / Entrepreneur
GetMostReadable TypeScript Function for Web Accessibility by Eric David Smith

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

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!

Contact


Eric David Smith
Software Engineer / Musician / Entrepreneur
Code Snippets

Related Blog Posts

👈 Scroll 👉

Blog Post Tags