WCAG spalvų kontrasto tikrintuvas

Įvertinkite teksto ir fono spalvų kontrasto santykį pagal WCAG 2.1 gaires. Akimirksniu generuokite prieinamus spalvų koregavimus.

HEX/RGB/HSL
HEX/RGB/HSL
Viskas vyksta lokaliai jūsų naršyklėje.

Tiesioginė teksto peržiūra

Didelė antraštė (18pt paryškinta / 24pt įprasta)

Tai yra didelio antraštinio teksto stiliaus peržiūra.

Įprastas tekstas (mažiau nei 18pt)

Lorem ipsum dolor sit amet, konsectetur adipiscing elitas.

Kontrasto santykis

18.6:1

WCAG 2.1 atitikties būsena

WCAG AA reikalavimai
Įprastas tekstas (4.5:1) PASS
Didelis tekstas (3.0:1) PASS
WCAG AAA reikalavimai
Įprastas tekstas (7.0:1) PASS
Didelis tekstas (4.5:1) PASS

WCAG 2.1 gairės

Lengvai patikrinkite kontrasto standartus, kad sukurtumėte prieinamas sąsajas, atitinkančias 508 skyriaus, ADA ir WCAG AA arba AAA gaires.

Pasiūlymų variklis

Automatiškai palaipsniui reguliuoti spalvas pagal HSL koordinates, kad būtų rasti artimiausi alternatyvūs variantai, atitinkantys kontrasto santykio kriterijus.

Visiškai kliento pusėje

Skaičiavimai vykdomi lokaliai jūsų naršyklės kontekste. Jokie spalvų, failų ar telemetrijos duomenys nesiunčiami į mūsų serverius.

Susiję spalvų įrankiai

HEX RGB HSL spalvų keitiklis
Konvertuokite spalvas ir koreguokite šviesumo koordinates.
Vaizdo spalvų parinkiklis
Išskirkite spalvų paletes iš dizaino maketų.
CSS spalvų konverteris
Konvertuoti CMYK, HSV, RGB, HSL ir HEX formatus.

Spalvų kontrasto tikrintuvas

Apskaičiuokite WCAG kontrasto santykius priekinio plano ir fono spalvoms bei parodykite bendrus teksto dydžio rezultatus.

Įvestis
Dvi galiojančios CSS spalvos ir pasirenkamas peržiūros tekstas.
Išvestis
Kontrasto santykis su WCAG AA ir AAA išlaikyta / neišlaikyta indikatoriais.
Svarbūs apribojimai
Skaičiavimas apima tik šviesos kontrastą; jis nepatvirtina sąsajos ar neatsižvelgia į šriftų atvaizdavimą, judesį, fokusą ar ne spalvų signalus.
Privatumas ir duomenų tvarkymas
Du galiojantys CSS spalvų ir pasirinktinis peržiūros tekstas yra apdorojami šioje naršyklės kortelėje. Convertr negauna ir nesaugo jų; uždarius ar perkrovus puslapį išvaloma darbo būsena, nebent įrankis aiškiai siūlo vietinį atsisiuntimą.

Kaip naudoti šį įrankį

  1. Pateikite dvi galiojančias CSS spalvas ir pasirinktinį peržiūros tekstą įrankio valdikliuose.
  2. Pasirinkite nustatymus, kurie veikia kontrasto santykį su WCAG AA ir AAA išlaikymo arba neišlaikymo rodikliais, tada paleiskite įrankį.
  3. Peržiūrėkite kontrasto santykį su WCAG AA ir AAA išlaikyta / neišlaikyta indikatoriais prieš kopijuodami arba atsisiųsdami.

Dažnos nesėkmių priežastys

Neteisingos spalvos negali būti išmatuotos, o skaidrumas be nustatyto fono gali padaryti santykį beprasmiu.

Praktinis pavyzdys

Palyginkite #1f2937 tekstą ant #ffffff, kad peržiūrėtumėte jo santykį normaliam ir dideliam tekstui.