Repository: storybook
Issue: UI: some elements have too low color contrast
Labels: accessibility

See https://dequeuniversity.com/rules/axe/3.4/color-contrast?application=axeAPI

## [Links](https://monorepo-bqv356ia7.now.sh/official-storybook/?path=/story/basics-link--styled-links)

### Primary
![image](https://user-images.githubusercontent.com/6651625/69497475-b7a7a500-0edd-11ea-822d-082ba9e5370b.png)

> Element has insufficient color contrast of 2.62 (foreground color: #1ea7fd, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1

Suggestion: change primary link color to #027ac5
![image](https://user-images.githubusercontent.com/6651625/69497469-b2e2f100-0edd-11ea-853b-cf7e82b76460.png)

### Secondary
![image](https://user-images.githubusercontent.com/6651625/69497502-f9385000-0edd-11ea-9ecb-edd45fd08784.png)

> Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1

Same for [subheadings](https://monorepo-bqv356ia7.now.sh/official-storybook/?path=/story/ui-sidebar-sidebarsubheading--simple)
![image](https://user-images.githubusercontent.com/6651625/69497773-d65b6b00-0ee0-11ea-9af7-d6f66539dc6c.png)

Suggestion: change secondary link and subheadings color to #6f6f6f. Change subheadings font-weight to 700 for compensation
![image](https://user-images.githubusercontent.com/6651625/69497461-a5c60200-0edd-11ea-9ce2-84aa959c3c52.png)
![image](https://user-images.githubusercontent.com/6651625/69497789-13276200-0ee1-11ea-90fe-7debd524a57a.png)

## [Selected sidebar item](https://monorepo-bqv356ia7.now.sh/official-storybook/?path=/story/ui-sidebar-sidebaritem--story-selected)
![image](https://user-images.githubusercontent.com/6651625/69498706-2dfed400-0eeb-11ea-9dd9-fce97c7d0376.png)

> Element has insufficient color contrast of 2.62 (foreground color: #ffffff, background color: #1ea7fd, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1

Suggestion 1: change background to #027ac5
![image](https://user-images.githubusercontent.com/6651625/69498720-4cfd6600-0eeb-11ea-87b4-0f729c918330.png)
Suggestion 2: change test color to #333333, change background to #81cefe
![image](https://user-images.githubusercontent.com/6651625/69498724-52f34700-0eeb-11ea-8d69-04ec246b5454.png)

## [JSX highlighting](https://monorepo-bqv356ia7.now.sh/official-storybook/?path=/story/basics-syntaxhighlighter--jsx)

![image](https://user-images.githubusercontent.com/6651625/69498746-a49bd180-0eeb-11ea-9c01-a37466e06c90.png)

> Element has insufficient color contrast of 3.63 (foreground color: #2b91af, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
> Element has insufficient color contrast of 3.99 (foreground color: #ff0000, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1

Suggestion: change  tag highlight color to #26809c, change attribute highlight color to #eb0000
![image](https://user-images.githubusercontent.com/6651625/69498825-62bf5b00-0eec-11ea-907b-a74a56662c4b.png)

## [Button](https://monorepo-bqv356ia7.now.sh/official-storybook/?path=/story/basics-button--all-buttons)

### Primary
![image](https://user-images.githubusercontent.com/6651625/69499275-97351600-0ef0-11ea-83f7-af5d26b1aaa2.png)

> Element has insufficient color contrast of 3.23 (foreground color: #ffffff, background color: #ff4785, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1

Suggestion 1: change background to #eb004e
![image](https://user-images.githubusercontent.com/6651625/69499319-09a5f600-0ef1-11ea-9620-6acf03aed8d7.png)
Suggestion2: change color to #333333, change background to #ff80aa
![image](https://user-images.githubusercontent.com/6651625/69499350-76b98b80-0ef1-11ea-99c6-3289f25d6817.png)

### Secondary
See Selected sidebar item

### Outline primary
![image](https://user-images.githubusercontent.com/6651625/69499380-e3cd2100-0ef1-11ea-9c23-6018c8d48cb6.png)

> Element has insufficient color contrast of 3.23 (foreground color: #ff4785, background color: #ffffff, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1

Suggestion: change text color to #eb004e
![image](https://user-images.githubusercontent.com/6651625/69499398-0b23ee00-0ef2-11ea-9174-075dac5dfc77.png)

### Outline secondary
See Link / Secondatry

## [Bagde](https://monorepo-bqv356ia7.now.sh/official-storybook/?path=/story/basics-badge--all-badges)
![image](https://user-images.githubusercontent.com/6651625/69499475-c8aee100-0ef2-11ea-9b59-71ca03731a98.png)

> Element has insufficient color contrast of 2.14 (foreground color: #66bf3c, background color: #e1ffd4, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1
> Element has insufficient color contrast of 2.72 (foreground color: #ff4400, background color: #feded2, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1

Suggestion: change text colors to #427c27 and #bd3200
![image](https://user-images.githubusercontent.com/6651625/69499522-3bb85780-0ef3-11ea-8af3-ec16319ed753.png)