How To Make Color Dependant On Background Color Button Css

Caroline Mae

2 min read

·

01-01-2025

6

0

Share

Creating visually appealing and accessible websites requires careful consideration of color contrast. A button's text should always be easily readable against its background, regardless of the background color. Dynamically adjusting text color based on the background ensures readability, even if the background color changes. This is easily achievable with CSS.

Understanding the Problem

The challenge lies in ensuring sufficient contrast between the button's text and its background. If the background is light, dark text is ideal. Conversely, light text works best on a dark background. Manually specifying text color for every possible background color is inefficient and impractical. We need a solution that adapts automatically.

The Solution: CSS and JavaScript

While a purely CSS solution is limited, combining CSS with a little JavaScript offers a robust and elegant approach.

1. The CSS Setup

First, we'll style our button with a general class. This allows us to apply the JavaScript functionality later.

.dynamic-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

This provides basic button styling. Crucially, we avoid setting a specific text color.

2. The JavaScript Magic

The JavaScript will dynamically calculate the contrast ratio between the background color and potential text colors (black and white), then select the color with the higher contrast.

function adjustTextColor(button) {
  const backgroundColor = window.getComputedStyle(button).backgroundColor;
  const rgb = backgroundColor.replace(/[^\d,]/g, '').split(',');
  const brightness = rgb.reduce((sum, value) => sum + parseInt(value), 0) / 3;

  button.style.color = brightness > 128 ? 'black' : 'white';
}


const buttons = document.querySelectorAll('.dynamic-button');
buttons.forEach(button => {
  adjustTextColor(button);  //Initial check
  button.addEventListener('DOMSubtreeModified', () => adjustTextColor(button)); //Recheck on change

});

This code snippet:

• Gets the button's background color using window.getComputedStyle.
• Converts the color to its RGB components.
• Calculates the average brightness. If the brightness is above 128 (out of 255), it sets the text color to black; otherwise, it sets it to white.
• The DOMSubtreeModified event listener ensures that the text color updates if the background color changes dynamically (e.g., through user interaction or another script).

3. Putting it Together

Apply the dynamic-button class to your button elements in your HTML:

<button class="dynamic-button" style="background-color: #333;">Dark Background Button</button>
<button class="dynamic-button" style="background-color: #eee;">Light Background Button</button>

This approach ensures that your button text remains legible, regardless of the background color. Remember to include both the CSS and JavaScript code in your project for this to work correctly.

Important Considerations: Accessibility

While this method significantly improves accessibility, always manually test your color combinations with accessibility checkers to ensure they meet WCAG guidelines. This JavaScript solution provides a good starting point, but thorough testing is crucial for true accessibility.