outline-color
=============

La propriété **`outline-color`** permet de définir la couleur avec laquelle on trace le contour de l'élément. Ce contour est tracé autour de la boîte de bordure et peut être utilisé pour faire ressortir l'élément.

Exemple interactif
------------------

À la différence de la bordure, le contour est tracé en dehors du cadre de l'élément et peut donc chevaucher d'autres contenus. La bordure, en revanche, modifiera la disposition de la page afin de s'assurer qu'aucun chevauchement involontaire ne se produit.La propriété `outline-color` est également synthétisée avec la propriété raccourcie `outline`.

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
outline-color: invert;

/\* Valeurs de couleur \*/
/\* Type <color> \*/
outline-color: red;
outline-color: #f92525;
outline-color: rgb(30, 222, 121);

/\* Valeurs globales \*/
outline-color: inherit;
outline-color: initial;
outline-color: unset;
```


La propriété `outline-color` est définie avec une des valeurs listées ci-après.

### Valeurs

`<color>`

Voir la page `<color>` pour plus d'informations sur les valeurs utilisables avec ce type.

`invert`

Afin de s'assurer que la bordure est visible, on applique une inversion de couleur avec l'arrière-plan. Cela permet de renforcer le contraste, quelle que soit la couleur de l'arrière-plan. Cette valeur ne doit pas nécessairement être supportée par les navigateurs. Si elle ne l'est pas, ils considèreront la règle comme invalide.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | Pour le mot-clé `auto`, la valeur calculée est `currentcolor`. Pour la valeur de la couleur, si la valeur est transparente, la valeur calculée sera la valeur `rgba()` correspondante. S'il n'y en a pas, ce sera la valeur `rgb()` correspondante. Le mot-clé `transparent` correspondra à `rgba(0,0,0,0)`. |
| Type d'animation | une couleur |

Syntaxe formelle
----------------
```

outline-color =   
  auto                      |  
  [ <color> | <image-1D> ]    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### HTML


```html
<p class="exemple">Mon contour est blue, da ba dee.</p>
```

### CSS


```css
.exemple {
  /\* Tout d'abord on utiliser outline \*/
  /\* pour définir le contour \*/
  outline: 2px solid;

  /\* Ensuite on précise sa couleur avec \*/
  /\* outline-color \*/
  outline-color: #0000ff;
}
```

### Résultat

Accessibilité
-------------

L'utilisation d'un focus personnalisé s'accompagne généralement d'une modification de la propriété `outline`. Si la couleur du contour est modifiée, il est nécessaire de vérifier que le contraste entre le contour et l'arrière-plan est suffisant afin que le contour puisse clairement être distingué.

Le ratio de contraste est déterminé en comparaisant les luminosités des deux couleurs. Pour le contraste entre un texte et son arrière-plan, les recommandations Web Content Accessibility Guidelines (WCAG) requièrent un ratio de 4.5:1 pour le contenu textuel et un ratio de 3:1 pour les titres ou les textes plus grands (18.66px et en gras ou 24px ou plus grand).

* Vérificateur de contraste WebAIM (en anglais)
* Comprendre les règles WCAG 1.4
* *Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0 (en anglais)*
Spécifications
--------------

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-color |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Le type de donnée `<color>`
* Les autres propriétés relatives aux couleurs : `color`, `background-color`, `border-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color` et `column-rule-color`
* Appliquer des couleurs sur des éléments HTML grâce à CSS