Color Contrast
Contraste de color
El contraste de color es la diferencia de luz medida entre el contenido y el fondo cercano. Muestra si los textos y bordes importantes son fáciles de ver.
Otro ejemplo
El equipo cambia el texto atenuado hasta que sea fácil de leer en superficies claras y oscuras.
Partes principales
- 01Foundation or token
- 02Applied component
- 03Visible state and rule
Úsalo cuando
Cumplir con el nivel de contraste WCAG adecuado para texto, iconos clave, marcas de enfoque y bordes de componentes. Agregar otra pista cuando el color tenga significado.
No lo uses cuando
Un tono diferente aún puede tener poco contraste. Nunca uses el color como la única señal de un estado.
Nombre usado en código
contrast ratio Antes de lanzarlo
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 color (Color Contrast). User context: El equipo cambia el texto atenuado hasta que sea fácil de leer en superficies claras y oscuras. Design concept to apply: Contraste de color (Color Contrast). Why it fits: Cumplir con el nivel de contraste WCAG adecuado para texto, iconos clave, marcas de enfoque y bordes de componentes. Agregar otra pista cuando el color tenga significado. Do not use it when: Un tono diferente aún puede tener poco contraste. Nunca uses el color como la única señal de un estado. 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): El estándar cubre únicamente el alcance listado. No elige el estilo visual, la decisión del producto ni el ejemplo de Vibulary. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Revisa esta petición
Review how Contraste de color (Color Contrast) is used now. Definition: El contraste de color es la diferencia de luz medida entre el contenido y el fondo cercano. Muestra si los textos y bordes importantes son fáciles 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.