Ensure proper color contrast according to WCAG AA

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

3 files changed, 11 insertions, 8 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 6cd3086c64f..fc8c6d2d225 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -147,10 +147,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;
@@ -162,11 +161,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 1b924e0e22f..8b311e57d1b 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -1327,7 +1327,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');
 			}
@@ -1342,8 +1344,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;