WCAG 色彩对比检查 WCAG Color Checker

About this plugin

Introduction

This Figma plugin helps you evaluate the contrast ratio between text and background colors in your design frames, ensuring they meet WCAG accessibility standards. Perfect for designers aiming to improve readability and accessibility.

Function Introduction

•Check text-background contrast ratio within selected frames.

•Evaluate contrast according to WCAG standards (AAA, AA, A, Fail).

•Visualize contrast results and interact with your design directly.

•Automatic identification and highlighting of areas needing improvement.

Usage

1.Select a frame in your Figma file.

2.Run the plugin and click “Check Contrast.”

3.Review the results, which are sorted by contrast ratio.

4.Click on any result to highlight and improve specific text elements.

Notes

•Ensure text layers are properly named for better result identification.

•The plugin currently supports checking text against solid color backgrounds only.

•For best results, use the plugin on well-structured design frames.

介绍

这个 Figma 插件帮助您评估设计画板中文本与背景颜色之间的对比度，以确保其符合 WCAG 无障碍设计标准。非常适合希望提升可读性和无障碍性的设计师。

功能说明

•检查选定画板中文本与背景的对比度。

•根据 WCAG 标准评估对比度（AAA、AA、A、Fail）。

•可视化对比度结果并直接与设计交互。

•自动识别和突出显示需要改进的区域。

使用方法

1.在 Figma 文件中选择一个画板。

2.运行插件并点击“检查对比度”。

3.查看按对比度排序的结果。

4.点击任一结果以突出并改进特定的文本元素。

注意事项

•确保文本图层正确命名，以便更好地识别结果。

•插件目前仅支持检查与纯色背景的文本对比。

•为获得最佳效果，请在结构良好的设计画板上使用插件。