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.

7.03 tot 1
Kontras
AAA
Teksresultaat
Baie goed

Vergelyk: #FFFFFF op #6B4A8C

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
7.03 tot 1. Teks: slaag AA, slaag AAA. UI-komponente: slaag.
Hoe dit nagegaan word
Kleure vergelyk (na menging)
Teks #FFFFFF op agtergrond #6B4A8C
Relatiewe luminansie
Teks 1.0000, agtergrond 0.0991
Formule
(L1 + 0.05) / (L2 + 0.05) waar L1 die luminansie van die ligter kleur is en L2 van die donkerder een.
Precies verhouding
7.0390 tot 1, getoon as 7.03 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
#ffffff
Agtergrond
#6b4a8c

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.