In modern web development, creating an accessible and visually appealing user interface (UI) is crucial for enhancing user experience. One aspect that significantly impacts accessibility is the contrast between text color and its background. Ensuring that text is easily readable against various background colors can be a challenge. This is where my custom React hook, useDynamicTextColor, comes into play. This blog post will explore how this hook works and how you can utilize it in your React projects to dynamically adjust text colors based on the background color.

Understanding Luminance

Before diving into the hook itself, it's essential to understand the concept of luminance. Luminance measures the brightness of a color, which is crucial in determining how readable text will be against a background. A well-calculated contrast between the text color and its background enhances readability and accessibility.

The useDynamicTextColor Hook

The useDynamicTextColor hook is designed to automatically decide the text color based on the luminance of the background color. It takes a background color in hexadecimal format as input and returns either 'black' or 'white' for the text color, ensuring optimal contrast and readability.

How It Works

1. Calculating Luminance: The hook starts by calculating the luminance of the given background color. The luminance calculation uses a specific formula that weighs the red, green, and blue components of the color differently, reflecting their varying contributions to human perception of brightness.

2. Determining Text Color: Based on the calculated luminance, the hook decides the text color. If the luminance exceeds a certain threshold (in this case, 140), it suggests that the background color is light enough that black text would offer better readability. Conversely, if the luminance is below this threshold, white text is chosen to contrast with darker backgrounds.

// Hook to calculate luminance and decide text color
const useDynamicTextColor = (bgColor) => {
    const getLuminance = (hex) => {
        let r, g, b;
        if (hex.length === 4) {
            r = parseInt(hex[1] + hex[1], 16);
            g = parseInt(hex[2] + hex[2], 16);
            b = parseInt(hex[3] + hex[3], 16);
        } else if (hex.length === 7) {
            r = parseInt(hex[1] + hex[2], 16);
            g = parseInt(hex[3] + hex[4], 16);
            b = parseInt(hex[5] + hex[6], 16);
        }
        // Formula to calculate luminance
        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
    };

    const textColor = useMemo(() => {
        const luminance = getLuminance(bgColor);
        // Default luminance threshold for deciding text color
        const luminanceThreshold = 140;
        return luminance > luminanceThreshold ? 'black' : 'white';
    }, [bgColor]);

    return textColor;
};

export default useDynamicTextColor;

Usage Example

To use this hook in your component, simply pass the background color (in hex format) to the useDynamicTextColor hook, and it will return the appropriate text color. Here's a quick example:

import React from 'react';
import useDynamicTextColor from './useDynamicTextColor';

const MyComponent = ({ bgColor }) => {
    const textColor = useDynamicTextColor(bgColor);

    return (
        <div style={{ backgroundColor: bgColor, color: textColor }}>
            This text color adjusts dynamically!
        </div>
    );
};

Conclusion

The useDynamicTextColor hook provides a simple yet powerful solution for dynamically adjusting text color based on background color, significantly improving UI accessibility and readability. By implementing this hook in your React projects, you can ensure that your text remains legible across a wide range of background colors, enhancing the overall user experience.