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 tekstinio pavadinimo stiliaus išvada.

Į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 dažai reguliariai reguliuojami HSL koordinatų metu, kad būtų galima rasti artimiausius alternatyvus, atitinkančius kontrastinio 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 spalva Picker
Išskirkite spalvų paletes iš dizaino maketų.
CSS spalvų konverteris
Konvertuoti CMYK, HSV, RGB, HSL ir HEX formatus.

Spalvų kontrasto tikrintuvas

Apskaičiuokite WCAG kontrastinius santykius priekinės ir fono spalvos ir parodyti bendrus teksto dydžio rezultatus.

Įvestis
Du galiojantys CSS spalvos ir pasirinktas išankstinis tekstas.
Išvestis
Kontrastinis santykis su WCAG AA ir AAA pasibaigus ar nesėkmingi rodikliai.
Svarbūs apribojimai
Apskaičiavimas apima tik šviesos kontrastą; jis nepažįsta sąsajos ar sąskaitos fontų renderavimo, judėjimo, dėmesio ar ne spalvų šakų.
Privatumas ir duomenų tvarkymas
Du galiojantys CSS spalvų ir pasirinktinis išankstinio teksto apdorojimas šiame naršyklės skirtuke. konverteris nepriima ar saugo; uždarant arba perkelti puslapį, darbo būklė išsiaiškinama, nebent įrankis aiškiai siūlo vietinį atsisiuntimą.

Kaip naudoti šį įrankį

  1. Įdiegti du galiojančius CSS spalvas ir pasirinktinį išankstinio teksto įrankio kontrolės.
  2. Pasirinkite nustatymus, kurie paveikia kontrastinį santykį su WCAG AA ir AAA pasibaigus arba nepavyko rodiklių, tada paleiskite įrankį.
  3. Peržiūrėkite kontrastinį santykį su WCAG AA ir AAA pasibaigus arba nesėkmingų rodiklių prieš kopijuojant ar atsisiųsti.

Dažnos nesėkmių priežastys

Neįgalios spalvos negali būti matuojamos, o skaidrumas be išspręsto fono gali padaryti santykį be prasmės.

Praktinis pavyzdys

Palyginkite #f2176 tekstą ant #ffffff, kad peržiūrėtumėte jo santykį tarp normalaus ir didelio teksto.