The contrast of two colours by WCAG 2.2, the text colour that reads best on one, and a colour at the contrast that you ask for.
WCAG 2.2 asks for these contrast ratios:
The ratio overstates the contrast of dark colours, which APCA addresses. APCA's licence forbids changing it and using it commercially, so it isn't here, but any function of two colours can stand in for ratio where an app wants its own measure.
WCAG defines the ratio for opaque colours, so ratio flattens a translucent colour first, as a browser draws it. These are the sources for that:
https://www.w3.org/TR/WCAG22/#dfn-contrast-ratio https://drafts.csswg.org/css-color-6/#contrast-transparency https://github.com/w3c/csswg-drafts/issues/7358 https://www.w3.org/WAI/standards-guidelines/act/rules/afw4f7/
The contrast of two colours by WCAG 2.2, the text colour that reads best on one, and a colour at the contrast that you ask for. WCAG 2.2 asks for these contrast ratios: - 4.5 for text, and 3 for large text, i.e. 18 points, or 14 points bold (success criterion 1.4.3) - 3 for the parts of a control and for graphics (1.4.11) - 7 and 4.5 at level AAA (1.4.6) The ratio overstates the contrast of dark colours, which APCA addresses. APCA's licence forbids changing it and using it commercially, so it isn't here, but any function of two colours can stand in for ratio where an app wants its own measure. WCAG defines the ratio for opaque colours, so ratio flattens a translucent colour first, as a browser draws it. These are the sources for that: - CSS Color 6, an Editor's Draft, section 2.2.2, for the order: the background over an opaque canvas, and then the text over the result - WCAG 2.2, note 3 of the ratio's definition, for white as the canvas, which CSS Color 6 leaves open (csswg-drafts issue 7358) - the W3C's ACT rule afw4f7, Text has minimum contrast, whose ratios for translucent text are those of the text flattened in sRGB https://www.w3.org/TR/WCAG22/#dfn-contrast-ratio https://drafts.csswg.org/css-color-6/#contrast-transparency https://github.com/w3c/csswg-drafts/issues/7358 https://www.w3.org/WAI/standards-guidelines/act/rules/afw4f7/
(at-ratio x background)(at-ratio x background r)The colour x at the OKLCH lightness where its contrast ratio with the
background is r or just over, or nil where no lightness reaches r.
By default r is 4.5, which WCAG 2.2 asks of text. The colour keeps its hue
and as much chroma as sRGB allows. Where a darker and a lighter colour would
both do, it's the one nearer the lightness of x. A translucent
background lies on white, as in ratio.
The colour `x` at the OKLCH lightness where its contrast ratio with the `background` is `r` or just over, or nil where no lightness reaches `r`. By default `r` is 4.5, which WCAG 2.2 asks of text. The colour keeps its hue and as much chroma as sRGB allows. Where a darker and a lighter colour would both do, it's the one nearer the lightness of `x`. A translucent `background` lies on white, as in ratio.
(at-ratios x background)(at-ratios x background rs)The colour x at each contrast ratio of rs with the background, as
at-ratio finds it. By default the ratios are [1.5 3 4.5 7], a ramp from a
decoration to AAA's text.
The colour `x` at each contrast ratio of `rs` with the `background`, as at-ratio finds it. By default the ratios are [1.5 3 4.5 7], a ramp from a decoration to AAA's text.
(black-or-white x)(black-or-white x canvas)Black or white, whichever contrasts more on the colour x by WCAG 2.2,
and white on a tie. A translucent x lies on the canvas, by default
white, as in ratio. contrast-color() of CSS Color 5 may choose otherwise,
since its measure is the browser's.
Black or white, whichever contrasts more on the colour `x` by WCAG 2.2, and white on a tie. A translucent `x` lies on the `canvas`, by default white, as in ratio. contrast-color() of CSS Color 5 may choose otherwise, since its measure is the browser's.
(dark? x)(dark? x canvas)Whether the colour x is dark, i.e. white text has more contrast on it
than black text, or as much. A translucent x lies on the canvas, by
default white, as in ratio, so it's as dark as it shows there.
Whether the colour `x` is dark, i.e. white text has more contrast on it than black text, or as much. A translucent `x` lies on the `canvas`, by default white, as in ratio, so it's as dark as it shows there.
(light? x)(light? x canvas)Whether the colour x is light, i.e. black text has more contrast on it
than white text. A translucent x lies on the canvas, by default white,
as in ratio, so it's as light as it shows there.
Whether the colour `x` is light, i.e. black text has more contrast on it than white text. A translucent `x` lies on the `canvas`, by default white, as in ratio, so it's as light as it shows there.
(luminance x)The relative luminance of the colour x, from 0 for black to 1 for
white, by WCAG 2.2, from its sRGB channels. It ignores alpha.
The relative luminance of the colour `x`, from 0 for black to 1 for white, by WCAG 2.2, from its sRGB channels. It ignores alpha.
(ratio a b)(ratio a b canvas)The contrast ratio of the colour a on the colour b, from 1 to 21,
with b on the canvas, by default white. Text wants 4.5, and a control 3.
The order and the canvas only matter for a translucent colour, which
composite/over flattens in sRGB: b over the canvas, and then a over
the result. White is a judgement, so pass the page's own colour where you
know it, e.g. in a dark theme. The result is nil where b is still
translucent on the canvas.
The contrast ratio of the colour `a` on the colour `b`, from 1 to 21, with `b` on the `canvas`, by default white. Text wants 4.5, and a control 3. The order and the `canvas` only matter for a translucent colour, which composite/over flattens in sRGB: `b` over the `canvas`, and then `a` over the result. White is a judgement, so pass the page's own colour where you know it, e.g. in a dark theme. The result is nil where `b` is still translucent on the `canvas`.
(wcag-level a b)(wcag-level a b canvas)The level of WCAG 2.2 that the contrast of the colour a on b meets, as
ratio measures it with the canvas: :aaa for 7 or more, :aa for 4.5,
:large for 3, which is enough for large text and for controls, or nil
where it meets none.
The level of WCAG 2.2 that the contrast of the colour `a` on `b` meets, as ratio measures it with the `canvas`: :aaa for 7 or more, :aa for 4.5, :large for 3, which is enough for large text and for controls, or nil where it meets none.
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |