WCAG - Update CSS contrast to meet WCAG AA minimum accessibility standards

webapp/src/main/webapp/css/account/account.css

@@ -138,7 +138,7 @@ padding-right: 5px;
     margin-bottom: 10px;
 }
 #externalAuthIdInUse {
-    color: #f70;
+    color: #B50;
     display: none;
 }
 #alignExternalAuthId {
@@ -161,7 +161,7 @@ padding-right: 5px;
     -webkit-border-top-left-radius: 5px;
 }
 #associateProfileBackgroundTwo {
-    background-color:#f1f2ee;
+    background-color:#F5F5F5;
     padding:7px 94px 33px 0;
     margin-top:-129px;
     margin-right:-8px;
@@ -176,7 +176,7 @@ padding-right: 5px;
     -webkit-border-bottom-right-radius: 5px;
 }
 #associateProfileBackgroundThree {
-    background-color:#f1f2ee;
+    background-color:#F5F5F5;
     padding:7px 94px 26px 12px;
     margin-top:-129px;
     margin-left:-12px;
@@ -190,7 +190,7 @@ padding-right: 5px;
     -webkit-border-top-right-radius: 5px;
 }
 #associateProfileBackgroundFour {
-    background-color:#f1f2ee;
+    background-color:#F5F5F5;
     padding:0 94px 26px 13px;
     margin-top:-3px;
     margin-left:-12px;
@@ -237,7 +237,7 @@ form.customForm input[name="confirmPassword"] {
 
 #edit-myProxy li.proxyInfoElement {
     padding-top: .8em;
-    border-bottom: 1px dotted #E0DFDF;
+    border-bottom: 1px dotted #898989;
     padding-bottom: 2em;
     padding-left: 0;
     clear: both;
@@ -251,7 +251,7 @@ form.customForm input[name="confirmPassword"] {
 }
 #edit-myProxy p.selected-editors {
     padding-top: 1.2em;
-    border-top: 1px solid #E0DFDF;
+    border-top: 1px solid #898989;
     padding-left: 0;
 }
 #edit-myProxy span.class-label {
@@ -338,7 +338,7 @@ li.proxyInfoElement {
 }
 p.selected-editors {
     padding-top: 1.2em;
-    border-top: 1px solid #E0DFDF;
+    border-top: 1px solid #898989;
     padding-left: 1.2em;
 }
 img.photo-profile,

webapp/src/main/webapp/css/browseClassGroups.css

@@ -28,7 +28,7 @@ ul#browse-classgroups {
     width: 200px;
     border: 1px solid #dde4e3;
     border-right: none;
-    background: #f1f2ee;
+    background: #F5F5F5;
     margin-left: 34px;
     padding: 0 20px 23px 20px;
     margin-top: 10px;

webapp/src/main/webapp/css/edit.css

@@ -28,12 +28,12 @@ form textarea {
     width: 60%;
 }
 form a:link.cancel, form a:visited.cancel {
-    color: #f70;
-    border-color: #f70;
+    color: #B50;
+    border-color: #B50;
 }
 form a:hover.cancel, form a:active.cancel {
     color: #fff;
-    background: #f70;
+    background: #B50;
 }
 form select option {
     padding-right: 5px;

webapp/src/main/webapp/css/individual/individual-property-groups.css

@@ -42,7 +42,7 @@ ul.propertyTabsList li:first-child {
 li.nonSelectedGroupTab {
     float:left;
     border: 1px solid #DFE6E5;
-    background-color:#E4ECF3;
+    background-color:#F2F9FB;
     padding: 6px 8px 6px 8px;
     cursor:pointer;
     border-top-right-radius: 4px;
@@ -56,7 +56,8 @@ li.selectedGroupTab {
     float:left;
     border: 1px solid #DFE6E5;
     border-bottom-color:#fff;
-    background-color:#FFF;
+    background-color:#13739D;
+    color: #FFF;
     padding: 6px 8px 6px 8px;
     border-top-right-radius: 4px;
     -moz-border-radius-topright: 4px;

webapp/src/main/webapp/css/individual/individual.css

@@ -54,7 +54,7 @@
 #individual-intro a.icon-rdf {
     font-size: 1.125em;
 }
-img#uriIcon {
+#uriIcon {
     cursor: pointer;
 }
 /* <------ INDIVIDUAL INTRO - LEFT SIDE CONTENT */
@@ -246,7 +246,7 @@ a.more-less {
 }
 a:hover.more-less {
     color: #fff;
-    background: #888;
+    background: #656565;
 }
 /* VERBOSE DISPLAY------>  */
 section.verbosePropertyListing {

webapp/src/main/webapp/css/menupage/menupage.css

@@ -94,9 +94,9 @@ ul#find-filters a {
     width: 150px;
     padding: 20px 12px 10px 12px;
     font-size: 1.25em;
-    color: #2485ae;
+    color: #12739D;
     font-weight: normal;
-    background: url(../images/arrow.gif) 140px 27px no-repeat;
+    background: url(../images/arrow_darkened.gif) 140px 27px no-repeat;
 }
 #researchers p {
     padding: 17px 15px 15px 175px;
@@ -242,7 +242,7 @@ li.individual h1 {
     line-height: 1.2em;
     font-weight: bold;
 }
-li.individual h1.thumb {
+li.individual p.thumb {
     padding-top: 30px;
 }
 #individuals-in-class span.title {

webapp/src/main/webapp/css/tooltip.css

@@ -13,7 +13,7 @@
     opacity: 1;
     max-width: 400px;
 
-    background-color: #f1f2ee;
+    background-color: #F5F5F5;
     border: 1px solid #F1D031;
     text-align: left;
     border-radius: 0;

webapp/src/main/webapp/css/vitro.css

@@ -23,6 +23,8 @@
 .disabledSubmit {
 	cursor:default ! important;
 }
+
+
 /* <------ USER FEEDBACK*/
 #error-alert {
     color: #900;
@@ -82,6 +84,18 @@
   clear: both;
 }
 
+/* SCREEN READER ONLY */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
 /* <------ INDEX PAGE*/
 .siteMap h2 {
     padding-bottom: 0;
@@ -115,7 +129,7 @@
 .searchTOC ul {
     width: 180px;
     border: 1px solid #dde4e3;
-    background: #f1f2ee;
+    background: #F5F5F5;
     padding: 0;
     margin-top: 4px;
     text-align: left;
@@ -157,7 +171,30 @@ a.close {
     display: block;
     text-align: right;
     margin-right: .3em;
-    font-size: .8em;
+    font-size: 1em;
+    float: right;
+    opacity: 0.7;
+    font-weight: 700;
+    line-height: 1;
+}
+
+a.close:hover, a.close:focus {
+    opacity: 1;
+    text-decoration: none;
+}
+
+.ui-slider-vertical .ui-slider-range-min {
+    background: #0078D7;
+}
+
+#slider-vertical .ui-slider-handle.ui-state-active {
+    background: #0078D7;
+}
+
+#slider-vertical .ui-slider-handle {
+    background-color: #fff;
+    border: 2px solid #222;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
 }
 
 /* ------------------------------------------------->  */
@@ -246,7 +283,7 @@ ul.dropdown ul.sub_menu li.inactive {
 }
 ul.dropdown ul.sub_menu li a:hover,
 ul.dropdown ul.sub_menu li a.hover {
-    color: #999 !important;
+    color: #656565 !important;
 }
 /*  LEVEL THREE */
 ul.dropdown ul ul {
@@ -310,9 +347,7 @@ ul.language-dropdown ul.sub_menu li.inactive {
 }
 ul.language-dropdown ul.sub_menu li a:hover,
 ul.language-dropdown ul.sub_menu li a.hover {
-    color: #999 !important;
-	opacity: 0.6;
-	filter: alpha(opacity=60); /* For IE8 and earlier */
+    color: #656565 !important;
 }
 /* ------ MANAGE LABELS ------ */
 section#rdfsLabels {
@@ -329,7 +364,7 @@ section#rdfsLabels li label {
     padding-left:5px;
 }
 section#rdfsLabels a.cancel {
-    color:#F70;
+    color:#B50;
 }
 p#mngLabelsText {
     margin-left:25px;
@@ -357,8 +392,8 @@ p#mngLabelsText {
 	 	text-decoration: none;
 		font-size: 18px;
 		border: none;
-	  padding-left: 13px;
-	  padding-top: 8px;
+        width: 104px;
+        height: 43px;
 	  cursor: pointer;
 }
 span.search-filter-selected {
@@ -376,6 +411,10 @@ input.search-homepage {
 		width: 351px;
 		background-position: right;
 }
+input.search-homepage::placeholder {
+        color: #676767;
+}
+
 a.filter-search {
 		position: absolute;
 		vertical-align: middle;
@@ -386,12 +425,6 @@ a.filter-search {
 		top: 0;
 		right: 135px;
 		z-index: 9999;
-}
-.filter-default {
-
-}
-.filter-active {
-
 }
 #filter-search-nav {
 		position: absolute;
@@ -522,6 +555,11 @@ table#table-listing td  a {
 	word-wrap: break-word;
 }
 
+/* browseByVClass view browse people */
+.individual > p {
+    margin-bottom: 0;
+}
+
 a.button.blue {
     padding: 7px 22px 8px;
     font-family: sans-serif;

webapp/src/main/webapp/js/account/accountAssociateProfile.js

@@ -217,7 +217,7 @@ var associateProfileFields = {
             this.associatedProfileUriField.val(uri);
             this.verifyUrl = url;
             this.associatedArea.show();
-            this.associateProfileBackgroundOneArea.css("background-color","#f1f2ee");
+            this.associateProfileBackgroundOneArea.css("background-color","#F5F5F5");
             this.associateProfileBackgroundOneArea.css("border","1px solid #ccc");
         }
     },
@@ -229,7 +229,7 @@ var associateProfileFields = {
         if (this.associationEnabled) {
             this.newProfileClassHasChanged();
             this.associationOptionsArea.show();
-            this.associateProfileBackgroundOneArea.css("background-color","#f1f2ee");
+            this.associateProfileBackgroundOneArea.css("background-color","#F5F5F5");
             this.associateProfileBackgroundOneArea.css("border","1px solid #ccc");
         }
     }

webapp/src/main/webapp/js/developer/translations.js

@@ -248,7 +248,7 @@ class PropInfo {
 			rawText.setAttribute("style", "width:100%; ");
 			if (overridenTranslations.has(key)) {
 				rawText.value = overridenTranslations.get(key);
-				rawText.style.backgroundColor = "#8BAB2E";
+				rawText.style.backgroundColor = "#536520";
 			} else {
 				rawText.value = propInfo.rawText;
 			}
@@ -277,7 +277,7 @@ class PropInfo {
 			} else {
 				var value = input.value;
 				if (pageTranslations.get(key).rawText != escapeHTML(value)) {
-					input.style.backgroundColor = "#8BAB2E";
+					input.style.backgroundColor = "#536520";
 					overridenTranslations.set(key, value);
 				} else {
 					input.style.backgroundColor = "white";

webapp/src/main/webapp/js/searchDownload.js

@@ -21,7 +21,7 @@ $(document).ready(function(){
     setTooltip("#downloadIcon", {
         title: '<div class="clearfix"><div style="float:right; width:150px;border-left: 1px solid #A6B1B0; padding: 3px 0 0 20px">'
                     	+'<p><label for="amount" style="font-size:14px;">Maximum Records:</label>'
-                    	+'<input disabled type="text" id="amount" style="margin-left:35px; border: 0; color: #f6931f; font-weight: bold; width:45px" /></p>'
+                    	+'<input disabled type="text" id="amount" style="margin-left:35px; border: 0; color: #91540F; font-weight: bold; width:45px" /></p>'
                     	+'<div id="slider-vertical" style="margin-left:52px; margin-top: -20px; height: 100px; background-color:white"></div>'
                     	+'<br /><a class="close" href="#">close</a></div>'
                     	+'<div style="float:left; font-size:14px; width:280px; padding: 3px 0 0 20px"><p><label>Download the results from this search</label></p> '

webapp/src/main/webapp/templates/freemarker/body/individual/individual-vitro.ftl

@@ -54,7 +54,7 @@
                     </#if>
                     <#--  Most-specific types -->
                     <@p.mostSpecificTypes individual />
-                    <span id="iconControlsVitro"><img id="uriIcon" title="${individual.uri}" class="middle" src="${urls.images}/individual/uriIcon.gif" alt="uri icon"/></span>
+                    <span id="iconControlsVitro"><img id="uriIcon" title="${individual.uri}" class="middle" src="${urls.images}/individual/uriIcon_darkened.gif" alt="uri icon"/></span>
                 </h1>
             </#if>
         </header>