Color Contrast
Contraste des couleurs
Le contraste des couleurs est la différence de lumière mesurée entre le contenu et son arrière-plan proche. Il montre si le texte clé et les contours sont faciles à voir.
Un autre exemple
L'équipe modifie le texte désactivé jusqu'à ce qu'il soit facile à lire sur des surfaces claires et sombres.
Parties principales
- 01Foundation or token
- 02Applied component
- 03Visible state and rule
Utilisez-le lorsque
Atteignez le niveau de contraste WCAG approprié pour le texte, les icônes clés, les marques de focus et les bords des composants. Ajoutez un autre indice lorsque la couleur a une signification.
Ne l'utilisez pas lorsque
Une couleur différente peut quand même avoir un mauvais contraste. N'utilise jamais la couleur comme seul signe pour un statut.
Nom utilisé dans le code
contrast ratio Avant d'expédier
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 des couleurs (Color Contrast). User context: L'équipe modifie le texte désactivé jusqu'à ce qu'il soit facile à lire sur des surfaces claires et sombres. Design concept to apply: Contraste des couleurs (Color Contrast). Why it fits: Atteignez le niveau de contraste WCAG approprié pour le texte, les icônes clés, les marques de focus et les bords des composants. Ajoutez un autre indice lorsque la couleur a une signification. Do not use it when: Une couleur différente peut quand même avoir un mauvais contraste. N'utilise jamais la couleur comme seul signe pour un statut. 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): La norme couvre uniquement le champ d'application énuméré. Elle ne choisit ni le style visuel, ni la décision de produit, ni l'exemple de Vibulary. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Vérifiez cette demande
Review how Contraste des couleurs (Color Contrast) is used now. Definition: Le contraste des couleurs est la différence de lumière mesurée entre le contenu et son arrière-plan proche. Il montre si le texte clé et les contours sont faciles à voir. 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.