ImageColorPicker.com

Kleurkontras-kontroleerder

Toets die kontrasverhouding tussen voorgrond- en agtergrondkleure om toeganklikheid te verseker.

Kontroleer jou kleure

Toets kleurkombinasies om te verseker dat hulle aan WCAG-toeganklikheidstandaarde vir teksleesbaarheid voldoen.

11.80 tot 1
Kontras
AAA
Teksresultaat
Baie goed

Vergelyk: #000000 op #F1BA2C

Teks

16px, Regulier (400)

Tel as gewone teks.

  • AA (WCAG 1.4.3): minstens 4.5:1

    Slaag

  • AAA (WCAG 1.4.6): minstens 7:1

    Slaag

Koppelvlak-komponente en grafika

Ikone, insetlyne, fokusaanwysers en ander dele wat jy moet sien om die koppelvlak te gebruik.

  • AA (WCAG 1.4.11): minstens 3:1

    Slaag
11.80 tot 1. Teks: slaag AA, slaag AAA. UI-komponente: slaag.
Hoe dit nagegaan word
Kleure vergelyk (na menging)
Teks #000000 op agtergrond #F1BA2C
Relatiewe luminansie
Teks 0.0000, agtergrond 0.5400
Formule
(L1 + 0.05) / (L2 + 0.05) waar L1 die luminansie van die ligter kleur is en L2 van die donkerder een.
Precies verhouding
11.8000 tot 1, getoon as 11.80 tot 1. Die getoonde waarde word afgesny, nie afgerond nie, sodat dit nooit beter lyk as wat dit is nie. Die presiese waarde is wat met die vereiste vergelyk word.

Teksgrootte: 16px, Regulier (400)

Tel as gewone teks. Groot teks is minstens 24px (18pt), of minstens 18.67px (14pt) wanneer bold (gewig 700 of meer). Groottes word afgekap, nie afgerond nie.

Tel as gewone teks. Groot teks is minstens 24px (18pt), of minstens 18.67px (14pt) wanneer bold (gewig 700 of meer). Groottes word afgekap, nie afgerond nie.

Aa
Voorskoutitel

Die vinnige bruin jakkals spring oor die lui hond

Klein teks voorbeeld (12px)

Teks
#000000
Agtergrond
#f1ba2c

WCAG Standaarde

Vlak AA

Minimum kontrasverhouding van 4.5:1 vir normale teks en 3:1 vir groot teks. Nodig vir meeste webwerwe.

Vlak AAA

Verbeterde kontrasverhouding van 7:1 vir normale teks en 4.5:1 vir groot teks. Aanbeveel vir optimale toeganklikheid.

Kleurkontras-kontroleerder

Bereken die kontrasverhouding van teks en agtergrondkleure.

Kies 'n kleur met die kleurkieser vir teks en agtergrondkleur of voer 'n kleur in RGB-heksadesimale formaat in (bv. #259 of #2596BE). Jy kan die glyer aanpas om kleur te kies. Die Web Content Accessibility Guidelines (WCAG) het 'n spesifieke riglyn om uit te vind of teks leesbaar is vir siende gebruikers. Hierdie kriteria gebruik 'n spesifieke algoritme om kleurkombinasies in vergelykbare verhoudings te omskep. Deur hierdie formule te gebruik, stel WCAG dat 'n 4.5:1 kleurkontrasverhouding met teks en sy agtergrond voldoende is vir gewone (liggaams)teks, en groot teks (18+ pt gereeld, of 14+ pt vet) moet ten minste 'n 3:1 kleurkontrasverhouding hê.

Belangrike kenmerke

  • Regstreekse kontrasverhouding berekening
  • WCAG AA & AAA nakomingskontrole
  • HSL-skuifknoppies vir fyninstelling
  • Meervoudige voorskouformate

Gevorderde gereedskap

  • Outomatiese kleurherstel
  • Teks- en agtergrondmonsters
  • Kleurnaam opsporing
  • Voer resultate uit

Gereelde vrae

Vir WCAG AA-nakoming vereis normale teks 'n minimum kontrasverhouding van 4,5:1, terwyl groot teks (18pt of 14pt vetgedruk) 3:1 vereis.

WCAG AAA vereis hoër kontrasverhoudings: 7:1 vir normale teks en 4,5:1 vir groot teks, in vergelyking met AA se 4,5:1 en 3:1 onderskeidelik.

Gebruik ons funksie vir outomatiese regstelling om teks- of agtergrondkleure aan te pas terwyl jou ontwerpdoel behou word, of pas kleure handmatig aan met HSL-skuifknoppies met visuele aanduidings wat optimale sones vir AA/AAA-nakoming wys.

Die groen sones en AA/AAA-merkers wys optimale reekse om WCAG-nakoming te bereik. Die rigtingwenke (Ligter/Donkerder) help jou na beter kontras op grond van jou huidige kleurkombinasie.

Ja, jy kan enige HEX-kleurkode invoer of die kleurkiesser gebruik om pasgemaakte kleure te kies. Die URL word outomaties bygewerk sodat jy spesifieke kleurkombinasies kan deel.