ImageColorPicker.com

Krāsu kontrasta pārbaudītājs

Pārbaudi kontrasta attiecību starp priekšplāna un fona krāsām, lai nodrošinātu pieejamību.

Pārbaudi savas krāsas

Pārbaudi krāsu kombinācijas, lai nodrošinātu, ka tās atbilst WCAG pieejamības standartiem teksta salasāmībai.

13.58 pret 1
Kontrasts
AAA
Teksta rezultāts
Super

Salīdzināts: #000000 uz #CDD0D6

Teksts

16px, Parasts (400)

Tiek uzskatīts par parastu tekstu.

  • AA (WCAG 1.4.3): vismaz 4.5:1

    Atbilst

  • AAA (WCAG 1.4.6): vismaz 7:1

    Atbilst

UI komponenti un grafika

Ikonas, ievades lauku robežas, fokusa indikatori un citi elementi, kurus jāredz, lai izmantotu saskarni.

  • AA (WCAG 1.4.11): vismaz 3:1

    Atbilst
13.58 pret 1. Teksts: izpilda AA, izpilda AAA. UI komponenti: atbilst.
Kā tas tiek pārbaudīts
Salīdzinātās krāsas (pēc sapludināšanas)
Teksts #000000 uz fona #CDD0D6
Relatīvā spilgtuma
Teksts 0.0000, fons 0.6294
Formula
(L1 + 0.05) / (L2 + 0.05) kur L1 ir gaišākas krāsas relatīvā luminance un L2 ir tumšākas krāsas relatīvā luminance.
Precīzs attiecība
13.5891 pret 1, rādīts kā 13.58 pret 1. Rādītā vērtība tiek nogriezta, nevis noapaļota, tāpēc tā nekad neizskatās labāka nekā ir. Tiešā vērtība ir tā, kas tiek salīdzināta ar prasību.

Teksta izmērs: 16px, Parasts (400)

Tiek uzskatīts par parastu tekstu. Liels teksts ir vismaz 24px (18pt), vai vismaz 18.67px (14pt) kad tas ir trekns (svars 700 vai vairāk). Izmēri tiek rādīti nogriežot, nevis noapaļojot.

Tiek uzskatīts par parastu tekstu. Liels teksts ir vismaz 24px (18pt), vai vismaz 18.67px (14pt) kad tas ir trekns (svars 700 vai vairāk). Izmēri tiek rādīti nogriežot, nevis noapaļojot.

Aa
Priekšskatījuma virsraksts

Ātrs brūns lapsa lec pāri slinkam sunim

Mazs teksta piemērs (12px)

Teksts
#000000
Fons
#cdd0d6

WCAG standarti

Līmenis AA

Minimālā kontrasta attiecība 4.5:1 parastam tekstam un 3:1 lielam tekstam. Nepieciešams lielākajai daļai vietņu.

Līmenis AAA

Uzlabota kontrasta attiecība 7:1 parastam tekstam un 4.5:1 lielam tekstam. Ieteicams optimālai pieejamībai.

Krāsu kontrasta pārbaudītājs

Aprēķini teksta un fona krāsu kontrasta attiecību.

Izvēlies krāsu, izmantojot krāsu atlasītāju tekstam un fona krāsai, vai ievadi krāsu RGB heksadecimālā formātā (piemēram, #259 vai #2596BE). Tu vari pielāgot slīdni, lai izvēlētos krāsu. Tīmekļa satura pieejamības vadlīnijās (WCAG) ir īpaša vadlīnija, kas palīdz noteikt, vai teksts ir salasāms redzīgiem lietotājiem. Šis kritērijs izmanto īpašu algoritmu, lai kartētu krāsu kombinācijas salīdzināmās attiecībās. Izmantojot šo formulu, WCAG norāda, ka 4.5:1 krāsu kontrasta attiecība starp tekstu un tā fonu ir pietiekama parastam (ķermeņa) tekstam, un lielam tekstam (18+ pt parasts vai 14+ pt trekns) jābūt vismaz 3:1 krāsu kontrasta attiecībai.

Galvenās funkcijas

  • Reāllaika kontrasta attiecības aprēķins
  • WCAG AA & AAA atbilstības pārbaude
  • HSL slīdņi precīzai pielāgošanai
  • Vairāki priekšskatījuma formāti

Uzlaboti rīki

  • Automātiska krāsu labošana
  • Teksta un fona paraugi
  • Krāsu nosaukumu noteikšana
  • Eksportēt rezultātus

Bieži uzdotie jautājumi

WCAG AA atbilstībai parastajam tekstam nepieciešama minimālā kontrasta attiecība 4,5:1, bet lielam tekstam (18pt vai 14pt treknrakstā) nepieciešama 3:1.

WCAG AAA prasa augstākas kontrasta attiecības: 7:1 parastajam tekstam un 4,5:1 lielam tekstam, salīdzinot ar AA attiecīgi 4,5:1 un 3:1.

Izmanto mūsu automātiskās labošanas funkciju, lai pielāgotu tekstu vai fonu, saglabājot tava dizaina nodomu, vai manuāli pielāgo krāsas ar HSL slīdņiem, kuru vizuālie rādītāji parāda optimālās zonas AA/AAA atbilstībai.

Zaļās zonas un AA/AAA marķieri rāda optimālos diapazonus WCAG atbilstībai. Virziena norādes (Gaišāks/Tumšāks) palīdz tev sasniegt labāku kontrastu, pamatojoties uz tavu pašreizējo krāsu kombināciju.

Jā, vari ievadīt jebkuru HEX krāsas kodu vai izmantot krāsu atlasītāju, lai izvēlētos pielāgotas krāsas. URL tiek automātiski atjaunināts, lai tu varētu dalīties ar konkrētām krāsu kombinācijām.