无障碍 CSS 渐变与对比度生成器

通过实时 WCAG 2.1 对比度检查创建无障碍渐变和盒子阴影

渐变
135°
效果
盒子阴影
0px
12px
30px
-8px
30%
卡片内容

你的无障碍设计

渐变上的文字只有在对比度足够时才能阅读——此工具会实时为你检查。

WCAG 对比度检查
渐变上的最坏情况——AA 大文本 3:1，AA 4.5:1，AAA 7:1。
CSS 输出

                
            

        


        
        

            

            
对比度检查使用渐变上的最坏情况：所有采样点的最小值。确保标题（大文本，3:1）、正文（4.5:1）和按钮文字至少通过 AA。

        


        
        

            

            
只需要单一颜色或 HEX/RGB/HSL 转换？使用我们的取色器与颜色转换器。

        


        
        

            
 带 WCAG 对比度检查器的无障碍 CSS 渐变生成器

            
创建真正可读的漂亮 CSS 渐变。无障碍渐变生成器将线性渐变（两种颜色和角度）、盒子阴影和实时 WCAG 2.1 对比度检查相结合，确保你的设计符合 AA 和 AAA 对比度标准。


            
渐变上的 WCAG 对比度如何工作？

            
WCAG 2.1 将对比度测量为文字颜色与背景颜色的比值。渐变上背景会变化，因此此工具会将文字颜色与整个渐变的对比度进行最坏情况检查，并在未达到 AA 或 AAA 时立即发出警告。


            
CSS 文字渐变和网格渐变

            
除了经典的线性渐变，你还可以创建 CSS 文字渐变（通过 background-clip: text 裁剪到标题上）以及带分层径向渐变的网格渐变——可直接复制为 CSS 或 Tailwind 类。


            
Tailwind 渐变生成器输出

            
将输出切换到 Tailwind，复制现成的类如 bg-gradient-to-br from-[#2563eb] to-[#7c3aed] 以及任意阴影值，直接粘贴到你的标记中。

        


        

            
 常见问题

            

                

                    
WCAG AA 和 AAA 是什么意思？

                    
AA 要求普通文字对比度至少为 4.5:1（大文字为 3:1），AAA 要求 7:1（大文字为 4.5:1）。此工具会实时根据这些阈值检查所有预览文字。

                

                

                    
渐变上的对比度如何计算？

                    
背景沿渐变变化，因此工具会采样两种颜色之间的多个点，并报告最坏情况——渐变上任何位置可能出现的最低对比度。如果该点通过，则整个渐变都是安全的。

                

                

                    
这个工具真的免费吗？

                    
是的。CSS 渐变生成器 100% 免费，完全在浏览器中运行，不会向任何服务器上传数据。

                

                

                    
我可以在 Tailwind 项目中使用生成的 CSS 吗？

                    
可以。将输出格式切换为 Tailwind，即可复制现成的渐变、阴影和文字颜色类（包括自定义角度、颜色和阴影的任意值）。

                

                

                    
我可以在我的网站上嵌入这个工具吗？

                    
当然可以！你可以通过 iframe 将CSS 渐变生成器免费嵌入到自己的网站上。在嵌入小部件页面上可以找到现成的嵌入代码，并可自定义颜色和样式。