Let me share a little story with you!
Choosing colors is a delightful agony for designers and developers.
While functional consultants happily let the choice of choosing semantic colors (💧 info, 🍏 success, 🍋 warning, 🔴 danger) to UI experts, they sometimes request unique colors for badges or pills, not for meaning but simply for aesthetic whims.
That’s why someone, maybe me or another team member, had the bright idea of letting Functional Consultants input any color they fancy by following these simple steps:
Step 1: Type in a color like “red”, “green”, or why not a hex color like “#e9967a”.
Step 2: Behind the scenes, I’ll handle the calculations 1 to ensure “proper contrast” 😝.
Step 3: On the frontend, we’ll pair each color with a combination of ink (white or black) and background (the color from step 1).
This workflow has a big flow like you can guess:
choosing a color in hex format would be difficult to remember
their choice could be one of the following colors if they decide to use html color names:
Using pure white or black on those color options might not provide enough contrast for optimal readability. We want our designs to pop off the screen with vibrant, high-contrast hues that are easy on the eyes and create a delightful user experience.
Here are the pros:
However, there are some cons to consider:
Unfortunately, not all colors support white or black text overlay from an accessibility standpoint.
Step 1: Limit the options to only HTML Color Names.
Step 2: Remove/Replace2 from the list of HTML Color Names those that are not accessible.
By implementing this two-step approach, we ensure that only colors deemed safe for HTML are considered initially, and then further refine the selection by excluding any colors within that set that pose accessibility challenges. This strategy effectively maintains both flexibility and accessibility while addressing potential consistency issues.
Below, you can find the list of all HTML Color Names with details about their contrast accessibility. This comprehensive list will aid in selecting colors that not only adhere to HTML safety standards but also prioritize accessibility considerations.
note: the one with red text are not accessible
Using the code below:
color1 = '#f00';
color2 = '#000000';getContrastRatio() {
const rgb1 = this.hexToRgb(this.color1);
const rgb2 = this.hexToRgb(this.color2);
// Calculate relative luminance for each color
const luminance1 = this.calculateLuminance(rgb1);
const luminance2 = this.calculateLuminance(rgb2);
// Calculate contrast ratio
const contrastRatio = (Math.max(luminance1, luminance2) + 0.05) / (Math.min(luminance1, luminance2) + 0.05);
return contrastRatio.toFixed(2); // Return contrast ratio with two decimal places
}hexToRgb(hex: string) {
// Remove '#' if present
hex = hex.replace('#', '');
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
return { r, g, b };
}calculateLuminance(rgb: { r: number, g: number, b: number }) {
const { r, g, b } = rgb;
const linearR = r / 255;
const linearG = g / 255;
const linearB = b / 255;
const sRGB = [linearR, linearG, linearB].map((channel) => {
return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
});
return 0.2126 _ sRGB[0] + 0.7152 _ sRGB[1] + 0.0722 \* sRGB[2];
}replace with accessible one behind the scene ↩︎