Ensure proper color contrast according to WCAG AA

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

4 files changed, 17 insertions, 9 deletions

diff --git a/apps/files/css/detailsView.scss b/apps/files/css/detailsView.scss
index 7393a459b8d..334fc0c8fd8 100644
--- a/apps/files/css/detailsView.scss
+++ b/apps/files/css/detailsView.scss
@@ -100,7 +100,7 @@
 }
 
 #app-sidebar .file-details {
-	color: #999;
+	color: $color-text-details;
 }
 
 #app-sidebar .action-favorite {
diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index f2d2e7d54f3..3568e2f3a67 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -148,10 +148,9 @@ table tr.mouseOver td {
 tbody a { color: $color-main-text; }
 
 span.conflict-path, span.extension, span.uploading, td.date {
-	color: #999;
+	color: $color-text-details;
 }
 span.conflict-path, span.extension {
-	opacity: .7;
 	-webkit-transition: opacity 300ms;
 	-moz-transition: opacity 300ms;
 	-o-transition: opacity 300ms;
@@ -163,11 +162,11 @@ tr:focus span.conflict-path,
 tr:hover span.extension,
 tr:focus span.extension {
 	opacity: 1;
-	color: #777;
+	color: $color-text-details;
 }
 
 table th, table th a {
-	color: #999;
+	color: $color-text-details;
 }
 table.multiselect th a {
 	color: #000;
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 4ef45a16b49..307147076b2 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -1328,7 +1328,9 @@
 			// size column
 			if (typeof(fileData.size) !== 'undefined' && fileData.size >= 0) {
 				simpleSize = humanFileSize(parseInt(fileData.size, 10), true);
-				sizeColor = Math.round(160-Math.pow((fileData.size/(1024*1024)),2));
+				// rgb(118, 118, 118) / #767676
+				// min. color contrast for normal text on white background according to WCAG AA
+				sizeColor = Math.round(118-Math.pow((fileData.size/(1024*1024)),2));
 			} else {
 				simpleSize = t('files', 'Pending');
 			}
@@ -1343,8 +1345,10 @@
 			// difference in days multiplied by 5 - brightest shade for files older than 32 days (160/5)
 			var modifiedColor = Math.round(((new Date()).getTime() - mtime )/1000/60/60/24*5 );
 			// ensure that the brightest color is still readable
-			if (modifiedColor >= '160') {
-				modifiedColor = 160;
+			// rgb(118, 118, 118) / #767676
+			// min. color contrast for normal text on white background according to WCAG AA
+			if (modifiedColor >= '118') {
+				modifiedColor = 118;
 			}
 			var formatted;
 			var text;
@@ -2387,7 +2391,7 @@
 			input.blur(function() {
 				if(input.hasClass('error')) {
 					restore();
-				} else { 
+				} else {
 					form.trigger('submit');
 				}
 			});
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 2e4e9028b30..a60460a3088 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -7,6 +7,11 @@ $color-warning: #ffcc44;
 $color-success: #46ba61;
 $color-primary-element: $color-primary;
 
+// rgb(118, 118, 118) / #767676
+// min. color contrast for normal text on white background according to WCAG AA
+// (Works as well: color: #000; opacity: 0.57;)
+$color-text-details: #767676;
+
 @function nc-darken($color, $value) {
   @return darken($color, $value);
 }