Glossary Color and accessibility terms, defined

Also called hue angle, color wheel

The attribute that names a color as red, yellow, green, blue or a mix of two neighbours. It is given as an angle around a color wheel, 0° to 360°, but the same color has a different angle in HSL, LCH and OKLCH.

Also called L, L*, perceptual lightness

How light a color looks compared with a white in the same light, from black to white. OKLCH’s L and CIELAB’s L* are built to follow it; HSL’s L is not.

Also called brilliance, luminosity

How much light an area seems to give off, on an open scale with no white to compare against. Lightness is brightness judged relative to white. Everyday design talk often uses the two words for the same thing.

Also called colourfulness, vividness

How strongly a color’s hue shows. Unlike chroma and saturation, it grows with the light: the same red cloth looks more colorful in sunlight than at dusk.

Also called C, colorfulness relative to white

Colorfulness judged against a white lit the same way. In OKLCH and LCH it is the distance from the gray axis: 0 is a gray, and the highest chroma a screen can show depends on the hue and the lightness.

Also called S, purity

Colorfulness judged against the color’s own brightness: how pure it looks for how light it is. HSL and HSV also have a number called saturation, but it is a ratio inside the RGB cube, so a pale pastel can score 100%.

Also called value, Munsell value, HSV value, HSB brightness

Munsell’s name for lightness, from 0 for black to 10 for white. HSV and HSB use the word for the largest of the R, G and B channels, which is not a lightness at all.

Also called cd/m², nits

The light coming from a surface in a given direction, measured in candelas per square metre (cd/m², also called nits). It is physical, not perceived: twice the luminance does not look twice as light.

Also called Y, luminance factor

Luminance scaled so that black is 0 and white is 1, computed from linear sRGB as 0.2126 R + 0.7152 G + 0.0722 B. WCAG 2’s contrast ratio is built on it.

Also called metameric match, metamers

Two colors that match under one light and stop matching under another. Their spectra differ, but under the first light they excite the eye’s cones the same way.

Also called reference white, D65, D50

The color a space or device treats as white, given as a chromaticity. sRGB and Display P3 use D65, average daylight. CSS’s lab() and lch() are defined against D50.

Also called standard illuminant, D65, A

A light defined by how much power it has at each wavelength, so that colors can be computed under it. D65 stands for noon daylight and A for a tungsten bulb.

Also called color constancy, Bradford transform, CAT

The eye’s adjustment to the color of the light, which keeps a white page looking white under warm or cool light. Color science models it with transforms such as Bradford, which CSS uses to move colors between D65 and D50.

Also called RGB, HSL, CMYK

A way of describing colors with numbers, such as RGB, HSL or CMYK, without saying which exact colors the numbers mean. Tying a model to primaries, a white point and a transfer function makes it a color space.

Also called colour space

A color model tied to measurable colors, so that a set of numbers means one exact color. sRGB, Display P3, CIELAB and OKLab are color spaces.

Also called color gamut, wide gamut

The range of colors a space, display or printer can reproduce. A color outside the target gamut has to be brought in before it can be shown.

Also called standard RGB, IEC 61966-2-1

The standard RGB space of the web and of most screens: Rec. 709 primaries, a D65 white and a transfer curve close to gamma 2.2. A hex code such as #D3AF37 is an sRGB color.

Also called P3, DCI-P3, color(display-p3)

A wider RGB space with DCI-P3 primaries, the D65 white and the sRGB transfer curve, shown by many recent phones and laptops. CSS writes it color(display-p3 r g b).

Also called BT.2020, ITU-R BT.2020

The very wide RGB space of ultra-high-definition video (ITU-R BT.2020), with primaries on the edge of the spectrum. Few displays cover all of it.

Also called linear RGB, scene-linear, srgb-linear

Values proportional to the amount of light, before a transfer curve is applied. Blending, mixing light and luminance belong in linear light; the values stored in sRGB are not linear.

Also called gamma, EOTF, OETF, tone curve

The curve that converts between linear light and the values a space stores, loosely called gamma. sRGB’s curve is a short straight segment followed by a power of 2.4, close overall to gamma 2.2.

Also called XYZ, tristimulus values, CIE 1931

The CIE’s 1931 space, from which most others are defined. Y is luminance; X and Z carry the rest of the color. Conversions between spaces usually pass through it.

Also called Lab, L*a*b*, CIE 1976

CIE L*a*b* (1976): lightness L* from 0 to 100, with a* running from green to red and b* from blue to yellow. It was built so that equal distances look equally different, and manages that only roughly.

Also called CIE LCh, lch()

CIELAB in polar form: lightness, chroma and a hue angle. CSS writes it lch(L C h).

Also called Oklab, oklab()

A perceptual space published by Björn Ottosson in 2020, with lightness L and two opponent axes, a and b. It predicts lightness and hue more evenly than CIELAB, which suits gradients and palette steps.

Also called Oklch, oklch()

OKLab in polar form: lightness, chroma and hue. Changing one leaves the others alone, which is why design systems use it to build palettes. CSS writes it oklch(L C h).

Also called hue saturation lightness, hsl()

Hue, saturation and lightness: RGB rearranged into a cylinder, easy to adjust by hand. Its saturation and lightness are geometric rather than perceptual, so equal steps rarely look equal.

Also called HSB, hue saturation value, hue saturation brightness

Hue, saturation and value, also called HSB: another cylinder made from RGB, used by many color pickers. Its value is the largest of the three RGB channels.

Also called process color, four-color

Cyan, magenta, yellow and black, the inks of four-color printing. A CMYK number means one exact color only with an ICC profile for the press and paper; conversions without a profile are approximations.

Also called hex code, #RRGGBB, hexadecimal

An sRGB color written as #RRGGBB: three bytes in hexadecimal, from 00 to FF, for red, green and blue. #RGB is a short form, and a fourth pair, #RRGGBBAA, adds alpha.

Also called opacity, transparency

A color’s opacity, from 0 (fully transparent) to 1 (opaque). A semi-transparent color looks different over every background, so its contrast can only be measured after blending it with what lies behind.

Also called uniform color space

The quality of a space in which equal numeric distances look like equal differences everywhere. No space achieves it fully; OKLab and CIELAB come much closer than RGB, HSL or XYZ.

Also called delta E, dE, CIEDE2000, dE00

A number for how different two colors look. CIEDE2000 is the usual formula: a difference of about 1 is near the smallest most people notice side by side, and tolerances for a match depend on the industry.

Also called clipping, rendering intent

Bringing a color that lies outside a target gamut inside it. Clipping each channel is quick but can shift the hue; CSS Color 4 instead lowers OKLCH chroma until the color fits, keeping lightness and hue.

Also called WCAG contrast, luminance contrast

WCAG 2’s measure of how far apart two colors are in relative luminance: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter. It runs from 1:1, no difference, to 21:1, black on white.

Also called 1.4.3, 1.4.6, AA contrast, AAA contrast

WCAG success criterion 1.4.3: text needs a contrast ratio of at least 4.5:1 with its background, or 3:1 if it is large. Criterion 1.4.6, Contrast (Enhanced), asks for 7:1 and 4.5:1 at level AAA.

Also called large text, 18pt, 14pt bold

WCAG’s large text: at least 18 point, or 14 point bold, which is about 24 CSS pixels, or about 18.7 bold. It needs 3:1 instead of 4.5:1 at level AA.

Also called 1.4.11, UI component contrast

WCAG success criterion 1.4.11: the parts of controls and graphics needed to understand them, such as an input’s border or a chart’s lines, need 3:1 against the colors next to them.

Also called 1.4.1, color alone

WCAG success criterion 1.4.1: color must not be the only way information is shown. A field in error also needs a message or an icon, and a link inside a paragraph usually needs an underline.

Also called Accessible Perceptual Contrast Algorithm, SAPC

The Accessible Perceptual Contrast Algorithm, by Andrew Somers: a contrast method that treats dark-on-light and light-on-dark differently and is read together with font size and weight. It reports Lc rather than a ratio. It is not part of WCAG 2, and WCAG 3’s contrast method has not been decided.

Also called APCA Lc, lightness contrast

APCA’s result. Positive means dark text on a light background and negative means light on dark. APCA’s simplest guidance asks for at least Lc 75 for body text, Lc 60 for other content text and Lc 45 for large text.

Also called dark on light, light on dark, reverse type

Whether text is darker than its background (dark on light) or lighter (light on dark). WCAG 2’s ratio gives the same answer both ways; APCA does not.

Also called focus ring, focus outline, :focus-visible

The visible mark, usually an outline, that shows which element has keyboard focus. WCAG 2.4.7 requires one to be visible; 2.4.13, at level AAA, sets its size and asks for a 3:1 change between focused and unfocused states.

Also called surround effect, induction

The way a color’s surroundings change how it looks: the same gray seems lighter on black than on white. Contrast formulas measure two colors on their own and ignore it.

Also called L M S cones, photoreceptors

The three kinds of light-sensitive cells in the retina that make color vision possible, called L, M and S for long, medium and short wavelengths. Color is the brain’s comparison of their signals.

Also called CVD, color blindness, colour blindness

Often called color blindness: one type of cone is missing or works differently, so some colors that differ for most people look alike. Red–green deficiencies are the most common, affecting about 1 in 12 men and 1 in 200 women of Northern European descent.

Also called protan, red-blind

No working L cones, the ones most sensitive to long wavelengths. Reds look darker and are confused with greens and browns.

Also called deutan, green-blind

No working M cones. Reds, greens and browns are confused, without the darkening of reds that protanopia brings.

Also called tritan, blue-blind

No working S cones, which is rare. Blues are confused with greens, and yellows with violets and pinks.

Also called protanomaly, deuteranomaly, tritanomaly

All three cone types are present but one is shifted, so the deficiency is milder: protanomaly, deuteranomaly or tritanomaly. Deuteranomaly is the most common color vision deficiency.

Also called rod monochromacy, total color blindness

Little or no cone function, so the world is seen in shades of gray, usually with low sharpness and strong sensitivity to light. It is very rare.

Also called color blindness simulation, Machado

Recomputing colors to approximate how they look with a color vision deficiency. The site uses the model of Machado, Oliveira and Fernandes (2009) in linear light. A simulation is a design aid, not a picture of anyone’s experience.

Also called Web Content Accessibility Guidelines, WCAG 2.2

The Web Content Accessibility Guidelines from the W3C. WCAG 2.2, the current Recommendation, has 86 success criteria under four principles: perceivable, operable, understandable and robust.

Also called SC, success criteria

A testable statement in WCAG, such as 1.4.3 Contrast (Minimum), which content either meets or fails. Each has a level: A, AA or AAA.

Also called Level A, Level AA, Level AAA

WCAG’s three levels: A, the minimum; AA, the level most accessibility policies point to; and AAA, enhanced. A page conforms at a level when it meets every criterion at that level and below.

Also called Accessibility Conformance Testing

Accessibility Conformance Testing rules: test procedures for parts of WCAG, published by the W3C, each with test cases that say what a correct tool should report. They make results from different tools comparable.

Also called false alarm, false negative

A check that reports a failure where there is none, also called a false alarm. A false negative is the opposite: a real failure the check misses. Automated accessibility tools trade one against the other.

Also called computed name, accname, aria-label

The name assistive technology announces for an element, such as a button’s text or an image’s alt text, worked out by the W3C’s Accessible Name and Description Computation.

Also called AT, screen reader, magnifier

Software or hardware people use to reach content in another way: screen readers, screen magnifiers, switch access, voice control and refreshable braille displays.

Also called CSS mix, blend

A CSS function that mixes two colors in a chosen space, such as color-mix(in oklab, blue, yellow). The space changes the result.

Also called from keyword, oklch(from …)

CSS syntax that builds a color from another: oklch(from var(--brand) calc(l - 0.1) c h) makes a darker brand color by changing one channel.

Also called color-scheme

A CSS function that gives its first color in a light color scheme and its second in a dark one, such as light-dark(#1C1A16, #F2EFE8). It follows the color scheme in use, so the page needs color-scheme: light dark.

Also called dark mode media query

A media query that reports whether the reader asked their system for a light or a dark appearance.

Also called Windows contrast themes, high contrast mode

A mode, such as Windows contrast themes, in which the browser replaces a page’s colors with a small palette the reader chose. CSS detects it with @media (forced-colors: active) and can refer to that palette through system colors such as CanvasText.

Also called native control color

A CSS property that tints native checkboxes, radio buttons, range sliders and progress bars to match a brand.

Also called automatic text color

A CSS function that returns white or black, whichever contrasts more with a given color. It picks only between those two and does not promise any WCAG level.

Also called gradient color space, in oklch

How a gradient or an animation finds the colors between two stops. CSS lets you choose the space, as in linear-gradient(in oklch, blue, yellow). Colors written as hex, rgb() or hsl() default to sRGB, which can pass through gray between distant hues.

Also called token, style token

A design decision stored as named data, such as color.text.primary set to #1C1A16, so the same value reaches code, design files and documentation.

Also called alias token, role token

A token named for its job rather than its value, such as color.danger or surface.raised. It points at a base token, so a theme can change the value without renaming anything.

Also called color scale, color ramp, steps

A tint is a color mixed with white, a shade with black and a tone with gray. Design systems usually build these steps in OKLCH, so that each step changes lightness by a similar amount.

Also called color palette, color system

A chosen set of colors with roles. An accessible palette is tested in the pairs it will actually be used in, in light and dark themes alike.