Color Contrast
Contraste de Cores
Contraste de Cores é a diferença de luz medida entre o conteúdo e o fundo perto dele. Ele mostra se os textos e bordas principais são fáceis de ver.
Outro exemplo
A equipe altera o texto em tons suaves até que seja fácil de ler em superfícies claras e escuras.
Partes principais
- 01Foundation or token
- 02Applied component
- 03Visible state and rule
Use-o quando
Atenda ao nível de contraste WCAG correto para texto, ícones-chave, marcas de foco e bordas de componentes. Adicione outra pista quando a cor tiver significado.
Não o use quando
Uma cor diferente ainda pode ter pouco contraste. Nunca use a cor como único sinal de um status.
Nome usado no código
contrast ratio Antes de lançar
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Contraste de Cores (Color Contrast). User context: A equipe altera o texto em tons suaves até que seja fácil de ler em superfícies claras e escuras. Design concept to apply: Contraste de Cores (Color Contrast). Why it fits: Atenda ao nível de contraste WCAG correto para texto, ícones-chave, marcas de foco e bordas de componentes. Adicione outra pista quando a cor tiver significado. Do not use it when: Uma cor diferente ainda pode ter pouco contraste. Nunca use a cor como único sinal de um status. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): O padrão cobre apenas o escopo listado. Ele não escolhe o estilo visual, decisão do produto ou exemplo de Vibulary. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Conferir este pedido
Review how Contraste de Cores (Color Contrast) is used now. Definition: Contraste de Cores é a diferença de luz medida entre o conteúdo e o fundo perto dele. Ele mostra se os textos e bordas principais são fáceis de ver. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.