Tagasuri ng contrast ng kulay ayon sa WCAG

Suriin ang contrast ratio ng mga kulay ng teksto at background batay sa mga alituntunin ng WCAG 2.1. Agad na bumuo ng mga pagsasaayos ng kulay para sa accessibility.

HEX/RGB/HSL
HEX/RGB/HSL
Lahat ay tumatakbo nang lokal sa iyong browser.

Live Preview ng Teksto

Malaking Heading (18pt Bold / 24pt Regular)

Isa itong preview ng estilo ng malalaking heading text.

Normal na Texto (Sa ilalim ng 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ngunit may mabigat na masa.

Ratio ng Contrast

18.6:1

Katayuan ng Pagsunod sa WCAG 2.1

Mga Kinakailangan ng WCAG AA
Normal na Texto (4.5:1) PASS
Malaking Teksto (3.0:1) PASS
Mga Kinakailangan ng WCAG AAA
Normal na Texto (7.0:1) PASS
Malaking Teksto (4.5:1) PASS

Mga Alituntunin ng WCAG 2.1

Madaling suriin ang mga pamantayan sa contrast para makagawa ng mga interface na madaling gamitin ng lahat at sumusunod sa mga alituntunin ng Section 508, ADA, at WCAG AA o AAA.

Engine ng mga Mungkahi

Awtomatikong ayusin nang paunti-unti ang mga kulay sa mga HSL coordinate upang mahanap ang pinakamalapit na mga alternatibong nakatutugon sa pamantayan ng contrast ratio.

Ganap na Client-Side

Isinasagawa ang mga kalkulasyon direkta sa loob ng iyong browser. Walang kulay, file, o telemetry coordinate na ipinapadala sa aming server.

Mga Kaugnay na Color Tools

Converter ng Kulay HEX RGB HSL
I-convert ang mga kulay at ayusin ang mga coordinate ng lightness.
Pumili ng Kulay ng Larawan
Kumuha ng color palette mula sa mga design mockup.
Converter ng CSS Color
I-convert sa pagitan ng CMYK, HSV, RGB, HSL, at HEX na mga format.

Checker ng Contrast ng Kulay

Kalkulahin ang mga contrast ratio ng WCAG para sa mga kulay ng foreground at background, at ipakita ang mga resulta para sa karaniwang laki ng text.

ang input
Dalawang wastong CSS color at opsyonal na preview text.
Mga output
Isang contrast ratio na may mga palatandaan kung pasado o hindi sa WCAG AA at AAA.
Mga tunay na limitasyon
Sinasaklaw lamang ng kalkulasyon ang contrast ng luminance. Hindi nito pinatutunayan na accessible ang isang interface at hindi nito isinasaalang-alang ang pag-render ng font, galaw, focus, o mga pahiwatig na hindi nakabatay sa kulay.
Privacy at paghawak ng data
Pinoproseso sa browser tab na ito ang dalawang wastong CSS color at opsyonal na preview text. Hindi ito natatanggap o iniimbak ng Convertr; kapag isinara o ni-reload ang page, mabubura ang kasalukuyang gawain maliban kung tahasang nag-aalok ang tool ng lokal na download.

Paano gamitin ang tool na ito

  1. Magbigay ng dalawang wastong kulay ng CSS at opsyonal na text para sa preview sa mga kontrol ng tool.
  2. Piliin ang mga setting na nakaaapekto sa contrast ratio, kasama ang mga palatandaan kung pasado o hindi sa WCAG AA at AAA, pagkatapos ay patakbuhin ang tool.
  3. Suriin ang contrast ratio kasama ang mga palatandaang pasado o bagsak ayon sa WCAG AA at AAA bago ito kopyahin o i-download.

Mga karaniwang sanhi ng pagkabigo

Hindi masusukat ang mga maling kulay, at maaaring maging walang saysay ang transparency kung walang natukoy na background.

Kapaki-pakinabang na halimbawa

Ikumpara ang #1f2937 text sa #ffffff para suriin ang ratio nito para sa normal at malaking text.