jquery.app
日本語
EnglishDeutschFrancaisEspanol日本語Nederlands

CSSツール

無料 CSS contrast-color()関数ジェネレーター

候補リストから最も読みやすいテキスト色を自動選択するcontrast-color() CSS関数を生成します。

ツールを読み込み中...

CSS contrast-color()関数ジェネレーターとは

The CSS contrast-color() function (Baseline 2026) selects the color with the highest contrast ratio from a list of candidates against a specified background. With contrast-color(background vs color1, color2, ...), you provide the background color and a list of candidate colors. The function evaluates the WCAG contrast ratio of each candidate against the background and returns the candidate with the best ratio. The optional to max keyword tells the function to always return the maximum-contrast candidate. This is a native CSS alternative to JavaScript-based text color switching for readable overlays, buttons, and badges.

クイックアンサー

Use CSS contrast-color(background vs candidates...) to automatically select the most readable color from a list. Works in Chrome 132+, Edge 132+, Safari 19+, and Firefox 136+. Supports to max mode for maximum contrast or priority-list order for branded color preference. Use with CSS custom properties for design system integration.

制限事項

  • contrast-color() is not supported in browsers before Chrome 132, Safari 19, or Firefox 136. Always provide a fallback color before the contrast-color() declaration, and use @supports to conditionally apply the function where available.
  • The function evaluates contrast based on relative luminance, which is a mathematical approximation of human color perception. Two colors with identical contrast ratios may subjectively read differently depending on hue, saturation, and surrounding context.
  • contrast-color() selects a single color from the candidate list. It cannot generate intermediate colors, blend candidates, or adjust opacity. For fine-grained color adjustment beyond picking from a list, use CSS color-mix() or manual color tokens.

使い方

  1. Enter the background color against which contrast will be measured. This can be a hex, rgb, hsl, or named color value.
  2. Add candidate colors — the function evaluates each one against the background and picks the best match. You can reorder candidates for the to max mode priority fallback.
  3. Choose the contrast mode: to max always picks the highest-contrast candidate, or omit it to use ordered priority (first candidate above the minimum ratio wins).
  4. Copy the generated contrast-color() expression into your stylesheet and replace the candidate colors with your design token references.

主な用途

  • Style text overlays on hero images and banners where the text must remain readable regardless of the background color or image.
  • Build badge and tag components that automatically adjust label text color based on the badge background color.
  • Create a dynamic button system where button text color adapts to the primary button background without writing multiple color variants.

用途

使用例

例

Hero section text overlay

A hero banner has a background gradient that shifts between dark and light sections. Use contrast-color(var(--hero-bg) vs white, black, var(--accent)) as the heading color. The heading automatically uses white on dark sections and black on light sections without media queries or JavaScript.

例

Tag component with dynamic colors

A tag component receives its background color as a CSS custom property. Use contrast-color(var(--tag-bg) to max vs white, var(--tag-text)) for the label color. The to max mode ensures maximum readability: white tags get dark text, dark tags get white text, without a separate light/dark class.

よくあるミス

  • Using to max mode when a specific color priority is intended — to max always returns the highest-contrast candidate, ignoring the candidate order. If you prefer a brand color over maximum contrast, omit to max and let the browser pick the first sufficiently contrasting color in order.
  • Assuming contrast-color() recalculates when the background changes — like any CSS function, it evaluates once per render of the element. If the background changes dynamically (via animation or JavaScript), contrast-color() re-evaluates naturally as part of the style recalculation cycle.
  • Using too many candidate colors — each extra candidate increases contrast computation. Two or three well-chosen candidates (light, dark, accent) cover most design systems. Testing all 16.7 million hex colors as candidates is not useful.

検証

  1. Test the contrast-color() expression with multiple background colors by changing the background value in DevTools Styles panel and observing the color value resolve to the expected candidate.
  2. Inspect the computed color value in Chrome DevTools to confirm contrast-color() resolves correctly, then test with the browser DevTools color contrast checker to verify the WCAG ratio meets your accessibility target.

FAQ

CSS contrast-color()関数ジェネレーターのFAQ

How does contrast-color() compute contrast ratio?

The function uses the WCAG 2.2 relative luminance algorithm to compute the contrast ratio between each candidate color and the background color. Relative luminance accounts for human perception of different color channels — green contributes more to perceived brightness than blue, for example. The ratio ranges from 1:1 (identical luminance) to 21:1 (black on white). The function then returns the candidate with the highest ratio (in to max mode) or the first candidate that meets or exceeds the implied threshold (in priority list mode).

Which browsers support contrast-color() as of 2026?

contrast-color() is Baseline 2026, supported in Chrome 132+, Edge 132+, Safari 19+, and Firefox 136+. Safari 18 and earlier as well as older Chromium versions do not recognize the function. For cross-browser support, use the function as a progressive enhancement with a manual fallback color declared first, then override with @supports (contrast-color(white vs black, white)).

Can I use CSS custom properties inside contrast-color()?

Yes. All color arguments to contrast-color() accept CSS custom properties, including var() references for the background color and each candidate. This is the most practical way to use the function in a design system — pass design tokens as candidates so the function selects between semantic colors. For example: contrast-color(var(--surface) vs var(--text-primary), var(--text-inverse)).

What happens if none of the candidates achieve WCAG AA contrast?

The function still returns the candidate with the highest contrast ratio regardless of whether any candidate meets a specific WCAG threshold. With to max mode, it always returns the best possible candidate. Without to max, it also returns the first candidate that meets a subjective threshold, or falls back to the first candidate. For true WCAG AA/AAA compliance, pair contrast-color() with explicit color-contrast() checks or pre-validate your candidate palette against design system backgrounds during development.

関連ツール

その他のcssツール

こちらもお試しください

こちらもお試しください