Understanding Web Color Formats
Modern web development relies on several color models to define visual styling across CSS, graphics, and design systems:
- HEX (#RRGGBB): A 6-character hexadecimal notation representing the red, green, and blue color channels from 00 to FF (0 to 255).
- RGB (rgb(r, g, b)): Specifies color as decimal values between 0 and 255 for Red, Green, and Blue light mixing.
- HSL (hsl(h, s%, l%)): Represents Hue (0-360 degrees on the color wheel), Saturation (0% to 100%), and Lightness (0% to 100%). HSL is intuitive for creating accessible color palettes, shades, and tints.
WCAG Text Contrast Guidelines
The Web Content Accessibility Guidelines (WCAG 2.1) require sufficient contrast between text and background colors to ensure readability for users with low vision or color vision deficiencies:
- WCAG AA (Normal Text): Minimum contrast ratio of 4.5:1.
- WCAG AA (Large Text): Minimum contrast ratio of 3.0:1 (for text 18pt or 14pt bold).
- WCAG AAA (Enhanced): Minimum contrast ratio of 7.0:1 for normal text and 4.5:1 for large text.
Use the contrast preview on this page to test text visibility against dark and light backgrounds before applying styles to your website.