Daily Toolkits

Värikontrastitarkistus

Tarkista etualalla/taustakontrasti WCAG AA:ta ja AAA:ta vastaan. Katso suhdepäivitys valitessasi värejä.

Color Contrast Checker

Live

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

  • Tarkista etualan/taustan kontrasti WCAG AA- ja AAA-ohjeiden mukaisesti.
  • Toimii selaimessasi
  • Ilmainen käyttää

Kuinka käyttää

  1. Valitse teksti (etualalla) ja taustavärit.
  2. Lue kontrastisuhde ja AA/AAA-tulokset.
  3. Säädä, kunnes saavutat tavoitetason.

How this tool works

  1. Valitse teksti (etualalla) ja taustavärit.
  2. Lue kontrastisuhde ja AA/AAA-tulokset.
  3. Säädä, kunnes saavutat tavoitetason.

Recommended settings

  • Käytä ensin oletusasetuksia ja säädä sitten tarvittaessa

Supported formats

Text / on-page input

File size and limits

  • Erittäin monimutkainen monikerroksinen esikatselu saattaa tuntua hitaammalta vanhemmissa puhelimissa.

Privacy

Väri- ja CSS-generaattorit toimivat kokonaan selaimessasi. Esikatselut ja konversiot eivät koskaan lataa tyylejäsi.

Common use cases

  • Käytä värikontrastitarkistusta aina kun tarvitset: Tarkista etualan/taustan kontrasti WCAG AA- ja AAA-ohjeiden mukaisesti.

Troubleshooting

Esikatselu näyttää erilaiselta liittämisen jälkeen

Tarkista, onko sivullasi kilpailevaa CSS:ää (nollaukset, periytyneet värit). Kopioi luotu sääntö ensin eristettyyn tyylitaulukkoon.

FAQ

Lataako tämä CSS:ni?

Ei. Generaattorit ja muuntimet toimivat selaimessasi live-esikatselulla.

Tarvitsenko tilin?

Ei. Avaa työkalu, säädä säätimiä ja kopioi CSS.

Aiheeseen liittyvät työkalut

HEX ↔ RGB ↔ HSL Converter

Convert colors between HEX, RGB, and HSL instantly with a live swatch.

Open tool

Text Shadow Generator

Craft readable text-shadow styles with live typography preview.

Open tool

CSS Gradient Generator

Build linear, radial, and conic gradients with live preview and copy-ready CSS.

Open tool