PrivTab

Pansuri ng contrast ng kulay

Suriin ang contrast ng kulay

Tumatakbo sa iyong browser · Walang upload

Nasa Ingles pa sa ngayon ang tool na ito at ang mga tagubilin sa pahinang ito. Pareho itong gumagana: lahat ay tumatakbo sa iyong browser.

– contrast ratio

Large text: The quick brown fox

Normal text: The quick brown fox jumps over the lazy dog. 0123456789

Button outline
UseWCAG AAWCAG AAA
Normal text (below 24 px, or below 18.66 px bold)
Large text (24 px and up, or 18.66 px bold)
Icons, borders and form fields–
  • Walang umaalis sa iyong device
  • Walang limitasyon sa laki mula sa server
  • Walang sign-up, walang watermark
  • Libre

How to check color contrast

  1. Enter the text color and the background color, or pick them.
  2. Read the contrast ratio and the pass or fail results for normal text, large text and interface parts.
  3. If it fails, click a suggested color: the nearest shade that passes.

The WCAG requirements

UseAAAAA
Normal text4.5 : 17 : 1
Large text (24 px, or 18.66 px bold)3 : 14.5 : 1
Icons, borders, form fields3 : 1–

Good to know

  • The ratio is calculated with the WCAG 2 formula and compared without rounding, so 4.49 : 1 fails AA.
  • See-through text colors are blended with the background first, as browsers draw them.
  • Passing the ratio is required but not everything: font weight, size and thin lines also affect readability.

Mga madalas itanong

What contrast ratio do I need?

For most text, at least 4.5 : 1 (WCAG AA). Large text needs 3 : 1. AAA asks for 7 : 1.

How are the suggestions made?

The text color keeps its hue and saturation and is made lighter or darker until it reaches the target ratio.

Is this APCA / WCAG 3?

No. It uses WCAG 2.1 and 2.2, which is what most laws and guidelines refer to today.