SONAR-16731 [891687] An icon lacks 3 to 1 contrast ratio

server/sonar-web/src/main/js/app/theme.js

@@ -42,6 +42,7 @@ module.exports = {
     gray71: '#b4b4b4',
     gray67: '#aaa',
     gray60: '#888',
+    gray52: '#525252',
     gray40: '#404040',
 
     transparentWhite: 'rgba(255,255,255,0.62)',
@@ -62,6 +63,7 @@ module.exports = {
     educationPrinciplesBorderColor: '#B0BDF9',
 
     favoriteColor: '#e77213',
+    homepageColor: '#D86C13',
 
     // table
     rowHoverHighlight: '#ecf6fe',

server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx

@@ -112,7 +112,7 @@ export default class ProjectsSortingSelect extends React.PureComponent<Props> {
                 : translate('projects.sort_ascending')
             }
             className="js-projects-sorting-invert spacer-left"
-            color={colors.gray60}
+            color={colors.gray52}
             onClick={this.handleDescToggle}>
             {sortDesc ? <SortDescIcon className="" /> : <SortAscIcon className="" />}
           </ButtonIcon>

server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsSortingSelect-test.tsx.snap

@@ -76,7 +76,7 @@ exports[`should handle the descending sort direction 1`] = `
     <ButtonIcon
       aria-label="projects.sort_descending"
       className="js-projects-sorting-invert spacer-left"
-      color="#888"
+      color="#525252"
       onClick={[Function]}
     >
       <SortDescIcon
@@ -170,7 +170,7 @@ exports[`should render correctly for leak view 1`] = `
     <ButtonIcon
       aria-label="projects.sort_ascending"
       className="js-projects-sorting-invert spacer-left"
-      color="#888"
+      color="#525252"
       onClick={[Function]}
     >
       <SortAscIcon
@@ -264,7 +264,7 @@ exports[`should render correctly for overall view 1`] = `
     <ButtonIcon
       aria-label="projects.sort_ascending"
       className="js-projects-sorting-invert spacer-left"
-      color="#888"
+      color="#525252"
       onClick={[Function]}
     >
       <SortAscIcon

server/sonar-web/src/main/js/components/icons/HomeIcon.tsx

@@ -30,7 +30,7 @@ export default function HomeIcon({ className, fill, filled = false, ...iconProps
   return (
     <Icon
       className={classNames(className, 'icon-outline', { 'is-filled': filled })}
-      style={{ color: fill || colors.orange }}
+      style={{ color: fill || colors.homepageColor }}
       {...iconProps}>
       <g transform="matrix(0.870918,0,0,0.870918,0.978227,0.978227)">
         <path d="M15.9,7.8L8.2,0.1C8.1,0 7.9,0 7.8,0.1L0.1,7.8C0,7.9 0,8.1 0.1,8.2C0.2,8.3 0.2,8.3 0.3,8.3L2.2,8.3L2.2,15.8C2.2,15.9 2.2,15.9 2.3,16C2.3,16 2.4,16.1 2.5,16.1L6.2,16.1C6.3,16.1 6.5,16 6.5,15.8L6.5,10.5L9.7,10.5L9.7,15.8C9.7,15.9 9.8,16.1 10,16.1L13.7,16.1C13.8,16.1 14,16 14,15.8L14,8.2L15.9,8.2C16,8.2 16,8.2 16.1,8.1C16,8 16.1,7.9 15.9,7.8Z" />