Understanding sRGB in Contrast Calculation

1. What Is sRGB?

sRGB (Standard Red Green Blue) is the default color space for the web, defined by the international standard IEC 61966-2-1. Created in 1996 by HP and Microsoft, sRGB was designed to provide a consistent color experience across consumer monitors, printers, and digital cameras. WCAG 2.2 mandates sRGB as the reference color space for calculating relative luminance and contrast ratios. This means every contrast calculation — whether performed by this tool, browser developer tools, or automated accessibility checkers — must use the sRGB transfer function to produce comparable results. The choice of sRGB ensures that accessibility measurements are consistent regardless of which tool performs the calculation. A contrast ratio of 4.5:1 means the same thing whether tested in Chrome DevTools, this calculator, or any WCAG-compliant testing tool.

2. The sRGB Transfer Function

Display screens do not emit light proportionally to the color values stored in an image file. A pixel value of 128 (out of 255) does not produce half the light of a pixel at 255. This nonlinear relationship is called gamma encoding, and the sRGB transfer function is the specific curve that reverses it. To calculate contrast accurately, each color channel (R, G, B) must first be linearized. The sRGB specification defines a piecewise function: values at or below 0.04045 (after normalizing to 0–1) are divided by 12.92, while higher values use the formula ((value + 0.055) / 1.055) raised to the power of 2.4. This linearization step is critical. Without it, mid-tone colors would produce significantly incorrect luminance values, and the resulting contrast ratios would not reflect what the human eye actually perceives on screen.

3. sRGB vs Other Color Spaces

Modern displays increasingly support wider color spaces like Display P3 (used by Apple devices) and Adobe RGB (used in professional photography). These spaces can represent more vivid colors than sRGB, particularly in the green and red-orange regions of the spectrum. However, WCAG contrast calculations always use sRGB, even when the actual display supports a wider gamut. Colors specified in CSS using P3 or other spaces are mapped to their sRGB equivalents for contrast measurement purposes. This is a deliberate choice: sRGB provides a universal baseline that works across all devices. In practice, this means a color pair that passes WCAG contrast in sRGB will also be readable on wider-gamut displays, though the appearance may be slightly more saturated. If you design in Display P3 or Adobe RGB, always verify your contrast ratios using the sRGB-based WCAG formula.

4. Practical Implications for Designers

Understanding sRGB matters for day-to-day design work in several ways. First, always specify your design colors in sRGB hex values (#RRGGBB) for web projects — this is what browsers render by default and what accessibility tools evaluate. Second, be aware that color values from design tools like Figma or Sketch may use different color profiles. When exporting colors for web use, ensure you are working in the sRGB color profile. A color that looks right in an Adobe RGB workspace may shift slightly when converted to sRGB. Third, the sRGB gamma curve means that contrast changes are not linear. Small adjustments to very dark or very light colors have a larger effect on the contrast ratio than the same adjustment to mid-range colors. When fine-tuning colors to reach a WCAG threshold, work with the contrast checker open to see real-time ratio changes as you adjust.

Try this example →