Bug 512011 - Selected string is hard to see in editor
Summary: Selected string is hard to see in editor
Status: RESOLVED FIXED
Alias: None
Product: Orion (Archived)
Classification: ECD
Component: Editor (show other bugs)
Version: unspecified   Edit
Hardware: PC Windows 7
: P2 normal (vote)
Target Milestone: 14.0   Edit
Assignee: Carolyn MacLeod CLA
QA Contact:
URL:
Whiteboard: 2017-02-24
Keywords: accessibility
Depends on:
Blocks:
 
Reported: 2017-02-09 23:30 EST by Carolyn MacLeod CLA
Modified: 2017-02-13 15:18 EST (History)
3 users (show)

See Also:

Attachments
blue-on-blue.png (23.51 KB, image/png)
2017-02-09 23:30 EST, Carolyn MacLeod CLA 		no flags Details
new-blue-on-blue.png (24.95 KB, image/png)
2017-02-09 23:51 EST, Carolyn MacLeod CLA 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Carolyn MacLeod CLA 2017-02-09 23:30:54 EST 
Created attachment 266749 [details]
blue-on-blue.png

The blue string text (foreground) with a light blue selection (background) is hard to see.

See the attached screen snap.

Here's the 2 colors as seen in a color contrast ratio tool:
http://leaverou.github.io/contrast-ratio/#rgb%2868%2C111%2C189%29-on-rgb%28180%2C213%2C255%29
(use up/down arrow keys in this tool to find a passing contrast ratio).

The colors are in editorTheme.css:
.editorTheme .string {
	color: #446FBD;   /* rgb(68,111,189) */
}

.editorTheme .textviewContent ::selection {
	background-color: #b4d5ff;  /* rgb(180,213,255) */
}

(also in textstyler.css:
.string {
	color: #446fbd;
})
Comment 1 Carolyn MacLeod CLA 2017-02-09 23:37:55 EST 
If we change the foreground color (i.e. the color of a string) as follows, then the contrast passes WCAG AA. Please tell me what you think:

http://leaverou.github.io/contrast-ratio/#rgb%2851%2C78%2C206%29-on-rgb%28180%2C213%2C255%29
Comment 2 Carolyn MacLeod CLA 2017-02-09 23:51:45 EST 
Created attachment 266750 [details]
new-blue-on-blue.png

Screen snap of selected string with new string color.
Comment 3 Steve Northover CLA 2017-02-10 08:28:56 EST 
I guess the second one seems better but they look almost the same.  Ship it and lets see.
Comment 4 Carolyn MacLeod CLA 2017-02-13 09:59:55 EST 
Noticed other syntax colors that didn't have enough contrast when selected:
- comment (light forest green on light blue)
- function name (light turquoise on light blue)
- control keywords like for, while, return (light orange on light blue)
- task keywords like TODO (blue on light blue)
- doc annotations like @private (light grey on light blue)
- punctuation operators like +, -, ||, = (light pink on light blue)
- parameter names (light pink on light blue)
- html attribute names (light gray on light blue)
- html tags (light orange on light blue)

Changed these to the closest color that passes the 4.5:1 test.
Comment 5 Carolyn MacLeod CLA 2017-02-13 10:15:56 EST 
Noticed other syntax colors that didn't have enough contrast when selected:
- comment (light forest green on light blue)
- function name (light turquoise on light blue)
- control keywords like for, while, return (light orange on light blue)
- task keywords like TODO (blue on light blue)
- doc annotations like @private (light grey on light blue)
- punctuation operators like +, -, ||, = (light pink on light blue)
- parameter names (light pink on light blue)
- html attribute names (light gray on light blue)
- html tags (light orange on light blue)

Changed these to the closest color that passes the 4.5:1 test.