格 千格 KiloCell

Colour Contrast Checker

Large Text Preview (Bold)
A plain text preview. This is an example text that will test the text contrast. You can freely adjust the text colours above to the background colours, and the real-time previews meet the WCAG 2.1 accessibility standards. The deeper text colour is recommended in light-colored settings, and vice versa. The AA level contrast at a positive text number of not less than 16px requires at least 4.5 ∶1 and at least 3 ∶1 for large characters or bold (greater than 18 pt or larger than 14 pt thick).
Ratio (Contrast Ratio)
21.00:1
Background Colour (Background)
Text Colour (Text)
AA Level (Salent Text) Pass.
AA Level (large text) Pass.
AAA Level (Square Text) Pass.
AAA Level (large text) Pass.

What's the color contrast? Why is it so important to SEO and experience?

Colour contrast is the difference in brightness between the two colours. In web design, this usually refers to a comparison between text and its background. Good contrasts are not only at the heart of accessibility, but are also key to solving specific problems such as “content difficult to read” and “high user loss rates”. Search engine (e.g., Google also uses accessibility as an important indicator of the quality of web pages.

WCAG 2.1 Standard Resolution

Web Content Accessibility Guide (WCAG) defines two levels of comparison requirements:

  • AA level (medium): This is the baseline requirement for most modern websites. The contrast of the normal text should be at least 4.5:1, large text (18pt or 14pt) The following table shows the total number of participants:
  • AAA (extreme): For websites with higher accessibility requirements. The average text must be compared to 7:1 and the large text 4.5:1.

How can you optimize your colour using this tool?

  1. Enter colour: Use a colour picker or directly enter HEX code.
  2. Observation values: The ratio is automatically updated. If the value is too low, try to move to the depth or to the background.
  3. Checking feedback: View the AA/AAA level results below to ensure at least that they are validated by AA level.
  4. Real time preview: The preview box is updated simultaneously to allow you to visualize the comfort of reading.

Common issues (FAQ)

Q: What type of text is "large text"?
A: WCAG defines the large-numbered text as 18pt (approximately 24px) or larger, or 14pt (approximately 1866px) with thicker text.

Q: Does low contrast affect Google ranking?
A: Yes. Lighthouse tool for Google PageSpeed Insights The government has been monitoring accessibility. If the comparison is low, it may result in a drop in the page rating, which indirectly affects the search ranking.

Q: Does the icon need to check contrasts in addition to text?
A: Yes. According to WCAG 2.1 , the key graphic components and interface elements (e.g. input border, functional icon) should also be matched by at least 3:1.