diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 5a32e4155f3125e..8dc5ede0af51001 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -11569,7 +11569,8 @@ /en-US/docs/Web/CSS/clamp() /en-US/docs/Web/CSS/clamp /en-US/docs/Web/CSS/color-adjust /en-US/docs/Web/CSS/print-color-adjust /en-US/docs/Web/CSS/color_value/color() /en-US/docs/Web/CSS/color_value/color -/en-US/docs/Web/CSS/color_value/color-contrast() /en-US/docs/Web/CSS/color_value/color-contrast +/en-US/docs/Web/CSS/color_value/color-contrast /en-US/docs/Web/CSS/color_value +/en-US/docs/Web/CSS/color_value/color-contrast() /en-US/docs/Web/CSS/color_value /en-US/docs/Web/CSS/color_value/color-mix() /en-US/docs/Web/CSS/color_value/color-mix /en-US/docs/Web/CSS/color_value/color_keywords /en-US/docs/Web/CSS/named-color /en-US/docs/Web/CSS/color_value/device-cmyk() /en-US/docs/Web/CSS/color_value/device-cmyk diff --git a/files/en-us/web/css/color_value/color-contrast/index.md b/files/en-us/web/css/color_value/color-contrast/index.md deleted file mode 100644 index e2e4dfa164fe7b7..000000000000000 --- a/files/en-us/web/css/color_value/color-contrast/index.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: color-contrast() -slug: Web/CSS/color_value/color-contrast -page-type: css-function -status: - - experimental -browser-compat: css.types.color.color-contrast ---- - -{{CSSRef}}{{SeeCompatTable}} - -The **`color-contrast()`** functional notation takes a {{cssxref("color_value","color")}} value and compares it to a list of other {{cssxref("color_value","color")}} values, selecting the one with the highest contrast from the list. - -## Syntax - -```css -color-contrast(wheat vs tan, sienna, #d2691e) -color-contrast(#008080 vs olive, var(--myColor), #d2691e) -``` - -### Values - -Functional notation: `color-contrast(color vs color-list)` - -- `color` - - - : Any valid {{CSSXref("<color>")}}. - -- `vs` - - - : A literal token as a component of the syntax. - -- `color-list` - - - : A comma-separated list of at least two color values to compare with the first value. - -## Specifications - -{{Specifications}} - -## Browser compatibility - -{{Compat}} - -## See also - -- {{cssxref("color_value", "<color>")}} data type -- [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module -- [`prefers-contrast`](/en-US/docs/Web/CSS/@media/prefers-contrast) and [`prefers-color-scheme`](/en-US/docs/Web/CSS/@media/prefers-color-scheme) {{cssxref("@media")}} features -- [`contrast()`](/en-US/docs/Web/CSS/filter-function/contrast) -- [WCAG: color contrast](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast) -- [CSS custom properties](/en-US/docs/Web/CSS/--*) and {{cssxref("var")}} diff --git a/files/en-us/web/css/color_value/index.md b/files/en-us/web/css/color_value/index.md index 8e35f63872a2d52..f63c02f38fb8c0e 100644 --- a/files/en-us/web/css/color_value/index.md +++ b/files/en-us/web/css/color_value/index.md @@ -76,7 +76,6 @@ A `` value can be specified using one of the methods listed below: - Other color spaces: {{CSSXref("color_value/color", "color()")}}. - By using [relative color](/en-US/docs/Web/CSS/CSS_colors/Relative_colors) syntax to output a new color based on an existing color. Any of the above color functions can take an **origin color** preceded by the `from` keyword and followed by definitions of the channel values for the new **output color**. - By mixing two colors: {{CSSXref("color_value/color-mix", "color-mix()")}}. -- By selecting a color based on contrast ratios: {{CSSXref("color_value/color-contrast", "color-contrast()")}}. - By specifying two colors, using the first for light color-schemes and the second for dark color-schemes: {{CSSXref("color_value/light-dark", "light-dark()")}}. ### `currentcolor` keyword diff --git a/files/en-us/web/css/css_colors/index.md b/files/en-us/web/css/css_colors/index.md index 499cd454850188c..9fb58abdf2b12eb 100644 --- a/files/en-us/web/css/css_colors/index.md +++ b/files/en-us/web/css/css_colors/index.md @@ -48,7 +48,6 @@ To see the code for this color syntax converter, [view the source on GitHub](htt - [`oklab()`](/en-US/docs/Web/CSS/color_value/oklab) - [`oklch()`](/en-US/docs/Web/CSS/color_value/oklch) - [`color()`](/en-US/docs/Web/CSS/color_value/color) -- [`color-contrast()`](/en-US/docs/Web/CSS/color_value/color-contrast) {{experimental_inline}} - [`color-mix()`](/en-US/docs/Web/CSS/color_value/color-mix) - [`device-cmyk()`](/en-US/docs/Web/CSS/color_value/device-cmyk) - {{CSSXref("color_value/light-dark", "light-dark()")}} diff --git a/files/en-us/web/css/css_functions/index.md b/files/en-us/web/css/css_functions/index.md index ab325dbe2f11529..c79cfdd5f9f35d9 100644 --- a/files/en-us/web/css/css_functions/index.md +++ b/files/en-us/web/css/css_functions/index.md @@ -200,8 +200,6 @@ The {{CSSxRef("color_value","<color>")}} CSS [data type](/en-US/docs/Web/C - : Specifies a particular, specified colorspace rather than the implicit sRGB colorspace. - {{CSSxRef("color_value/color-mix", "color-mix()")}} - : Mixes two color values in a given colorspace by a given amount. -- {{CSSxRef("color_value/color-contrast", "color-contrast()")}} - - : Selects the highest color contrast from a list of colors, compare to a base color value. - {{CSSxRef("color_value/device-cmyk", "device-cmyk()")}} - : Defines CMYK colors in a device-dependent way. - {{CSSXref("color_value/light-dark", "light-dark()")}}