Hexadecimal color notation expresses an RGB color as a hash symbol followed by red, green, and blue hexadecimal components. A six-digit code uses two digits per component, with values from 00 through ff; the corresponding decimal range is 0 through 255. section 7.1.1
Use these forms when specifying RGB colors in CSS:
- #rrggbb assigns two hexadecimal digits to each RGB component. section 7.1.1
- Repeated pairs can be shortened: #3366cc is equivalent to #36c. section 7.1.1
- Adding an alpha pair produces #rrggbbaa, where 00 is transparent and ff is opaque. section 7.1.1
Applying purple text
The decimal RGB value 128 converts to hexadecimal 80, so equal red and blue components produce purple: h1 { color: #800080; }. The shorter form is unavailable here because the component pairs are not all made from repeated characters. section 7.1.1
Listing 7.10 JavaScript code to calculate a contrast ratio
function hexToRgb(hex) { #1
hex = hex.replace(/^#/, ""); #2
if (hex.length === 3) { #3
hex = hex.split("").map(ch => ch + ch).join(""); #3
} #3
const num = parseInt(hex, 16);
return {
r: (num >> 16) & 255, #4
g: (num >> 8) & 255, #4
b: num & 255 #4
};
}
function relativeLuminance(r, g, b) { #5
let R_n = r / 255, G_n = g / 255, B_n = b / 255; #6
const toLinear = (c) => #7
c <= 0.04045 ? #7
c / 12.92 : #7
((c + 0.055) / 1.055) ** 2.4; #7
const R_l = toLinear(R_n); #7
const G_l = toLinear(G_n); #7
const B_l = toLinear(B_n); #7
return 0.2126 * R_l + 0.7152 * G_l + 0.0722 * B_l; #8
}
function getContrastRatio(color1, color2) { #9
const rgb1 = hexToRgb(color1);
const rgb2 = hexToRgb(color2);
const L1 = relativeLuminance(rgb1.r, rgb1.g, rgb1.b);
const L2 = relativeLuminance(rgb2.r, rgb2.g, rgb2.b);
const lighter = Math.max(L1, L2); #10
const darker = Math.min(L1, L2); #10
const ratio = (lighter + 0.05) / (darker + 0.05); #11
return ratio;
}
function checkCompliance(cr, isLargeText = false) { #12
const thresholds = {
aa: { normal: 4.5, large: 3.0 }, #13
aaa: { normal: 7.0, large: 4.5 } #13
};
const textType = isLargeText ? 'large' : 'normal';
return {
aa: cr >= thresholds.aa[textType], #14
aaa: cr >= thresholds.aaa[textType] #15
};
}
A JavaScript contrast checker accepts three- or six-digit RGB hex codes, expands shorthand, converts components to decimal values, and uses them to calculate luminance and contrast. section 7.4.4
