diff --git a/.github/actions/audit-accessibility/main.js b/.github/actions/audit-accessibility/main.js
index 1760e3a56e..0d4638aa02 100644
--- a/.github/actions/audit-accessibility/main.js
+++ b/.github/actions/audit-accessibility/main.js
@@ -53,7 +53,7 @@ const startStorybook = () => {
         storybookServer.listen(port, () => {
             console.log(`Serving static storybook at: http://localhost:${port}`);
             resolve({
-                getStoryUrl: (id) => `http://localhost:${port}/iframe.html?viewMode=story&id=${id}`,
+                getStoryUrl: (id) => `http://localhost:${port}/iframe.html?viewMode=story&id=${id}&skin=Blau`,
                 closeStorybook: () => {
                     console.log('Stopping static storybook server');
                     storybookServer.close();
@@ -81,12 +81,9 @@ const audit = async (browser, url, disabledRules = []) => {
             // ignored because we use invented autocomplete values to workaround related chrome issues
             'autocomplete-valid',
             // ignored because disabled input fields have a low contrast by design spec
-            'color-contrast',
             // https://jira.tid.es/browse/WEB-612
             'scrollable-region-focusable',
             // https://jira.tid.es/browse/WEB-616
-            'role-img-alt',
-            // https://jira.tid.es/browse/WEB-627
             'button-name',
             ...disabledRules,
         ])
diff --git a/src/skins/blau.tsx b/src/skins/blau.tsx
index 17de613bee..ab16260313 100644
--- a/src/skins/blau.tsx
+++ b/src/skins/blau.tsx
@@ -20,56 +20,58 @@ export const palette = {
     blauYellow10: '#FFF6E9',
     blauYellow40: '#FFC364',
     blauYellow60: '#F09500',
+    blauYellow65: '#D28200',
     blauYellow70: '#996614',
     blauGreen: '#30D300',
     blauGreen10: '#EAFBE5',
     blauGreen30: '#97E980',
     blauGreen70: '#1D7F00',
-    blauRed: '#F64417',
+    blauRed: '#D12937',
     blauRed10: '#FEECE8',
     blauRed20: '#FCC7B9',
     blauRed30: '#FA9E87',
     blauRed40: '#F97C5D',
     blauRed70: '#C93712',
-    grey1: '#F5F9FA',
-    grey2: '#E7E7E7',
-    grey3: '#B8B8B8',
-    grey4: '#A0A0A0',
-    grey5: '#808285',
+    grey1: '#F6F6F6',
+    grey2: '#F2F2F2',
+    grey3: '#DDDDDD',
+    grey4: '#8A8C90',
+    grey5: '#666666',
     grey6: '#000000',
     white: '#FFFFFF',
     darkModeBlack: '#191919',
     darkModeGrey: '#242424',
-    darkModeGrey6: '#313235',
+    darkModeGrey5: '#6D7D88',
+    darkModeGrey6: '#252525',
 };
 
 export const getBlauSkin: GetKnownSkin = () => {
     const skin: KnownSkin = {
         name: BLAU_SKIN,
         colors: {
+            background: palette.white,
+            backgroundAlternative: palette.blauBluePrimary20,
             backgroundBrand: palette.blauBluePrimary,
             backgroundBrandSecondary: palette.blauBluePrimary,
-            appBarBackground: palette.white,
-            background: palette.white,
             backgroundContainer: palette.white,
             backgroundContainerError: palette.blauRed10,
             backgroundContainerHover: applyAlpha(palette.blauBlueSecondary, 0.05),
             backgroundContainerPressed: applyAlpha(palette.blauBlueSecondary, 0.08),
-            backgroundContainerBrand: palette.blauBluePrimary,
+            backgroundContainerBrand: palette.blauBlueSecondary,
             backgroundContainerBrandHover: applyAlpha(palette.darkModeBlack, 0.2),
             backgroundContainerBrandPressed: applyAlpha(palette.darkModeBlack, 0.4),
-            backgroundContainerBrandOverInverse: palette.blauBlueSecondary,
+            backgroundContainerBrandOverInverse: palette.blauBlueSecondary60,
             backgroundContainerAlternative: palette.blauBluePrimary20,
             backgroundOverlay: applyAlpha(palette.blauBlueSecondary, 0.75),
-            backgroundSkeleton: palette.grey2,
+            backgroundSkeleton: palette.grey3,
             backgroundSkeletonInverse: palette.blauBlueSecondary,
-            navigationBarBackground: palette.blauBluePrimary,
-            backgroundAlternative: palette.blauBluePrimary20,
             backgroundBrandTop: palette.blauBluePrimary,
             backgroundBrandBottom: palette.blauBluePrimary,
+            appBarBackground: palette.white,
+            navigationBarBackground: palette.blauBluePrimary,
             skeletonWave: palette.grey2,
             borderLow: palette.grey1,
-            border: palette.grey2,
+            border: palette.grey3,
             borderHigh: palette.grey5,
             borderSelected: palette.blauBlueSecondary60,
             coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
@@ -108,28 +110,28 @@ export const getBlauSkin: GetKnownSkin = () => {
             textLinkSnackbar: palette.blauPurple30,
             textActivated: palette.blauBlueSecondary,
             textBrand: palette.blauBluePrimary,
-            inputBorder: palette.grey5,
-            control: palette.grey5,
+            inputBorder: palette.grey4,
+            control: palette.grey4,
             controlActivated: palette.blauBlueSecondary,
             controlInverse: palette.blauBluePrimary30,
             controlActivatedInverse: palette.white,
             controlError: palette.blauRed,
-            barTrack: palette.grey2,
-            barTrackInverse: applyAlpha(palette.grey6, 0.2),
+            barTrack: palette.grey3,
+            barTrackInverse: applyAlpha(palette.white, 0.5),
             loadingBar: palette.blauBlueSecondary,
-            loadingBarBackground: palette.blauBlueSecondary10,
+            loadingBarBackground: palette.blauBlueSecondary20,
             toggleAndroidInactive: palette.grey2,
-            toggleAndroidBackgroundActive: palette.blauBlueSecondary10,
+            toggleAndroidBackgroundActive: palette.blauBlueSecondary30,
             iosControlKnob: palette.white,
             controlKnobInverse: palette.blauBlueSecondary,
-            divider: palette.grey2,
+            divider: palette.grey3,
             dividerInverse: applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.blauBluePrimary,
             badge: palette.blauRed,
             feedbackErrorBackground: palette.blauRed,
             feedbackInfoBackground: palette.grey6,
             brand: palette.blauBluePrimary,
-            brandHigh: palette.blauBlueSecondary,
+            brandHigh: palette.blauBlueSecondary60,
             inverse: palette.white,
             neutralHigh: palette.grey6,
             neutralMedium: palette.grey5,
@@ -143,15 +145,15 @@ export const getBlauSkin: GetKnownSkin = () => {
             error: palette.blauRed,
             textError: palette.blauRed,
             textErrorInverse: palette.white,
-            success: palette.blauGreen,
-            warning: palette.blauYellow,
+            success: palette.blauGreen70,
+            warning: palette.blauYellow65,
             promo: palette.blauPurple,
             highlight: palette.blauBluePrimary,
             successLow: palette.blauGreen10,
             warningLow: palette.blauYellow10,
             errorLow: palette.blauRed10,
             promoLow: palette.blauPurple10,
-            brandLow: palette.blauBlueSecondary10,
+            brandLow: palette.blauBluePrimary20,
             successHigh: palette.blauGreen70,
             warningHigh: palette.blauYellow70,
             errorHigh: palette.blauRed70,
@@ -160,38 +162,38 @@ export const getBlauSkin: GetKnownSkin = () => {
             warningHighInverse: palette.blauYellow70,
             errorHighInverse: palette.blauRed70,
             promoHighInverse: palette.blauPurple,
-            textNavigationBarPrimary: palette.white,
-            textNavigationBarSecondary: palette.blauBlueSecondary20,
-            textNavigationSearchBarHint: palette.blauBlueSecondary20,
-            textNavigationSearchBarText: palette.white,
+            textNavigationBarPrimary: palette.grey6,
+            textNavigationBarSecondary: palette.grey6,
+            textNavigationSearchBarHint: palette.grey6,
+            textNavigationSearchBarText: palette.grey6,
             textAppBar: palette.grey5,
             textAppBarSelected: palette.blauBlueSecondary60,
             customTabsBackground: palette.blauBluePrimary,
             tagTextPromo: palette.blauPurple,
-            tagTextActive: palette.blauBluePrimary,
+            tagTextActive: palette.blauBlueSecondary,
             tagTextInactive: palette.grey5,
-            tagTextInfo: palette.blauBluePrimary,
+            tagTextInfo: palette.blauBlueSecondary,
             tagTextSuccess: palette.blauGreen70,
             tagTextWarning: palette.blauYellow70,
             tagTextError: palette.blauRed70,
             tagBackgroundPromo: palette.blauPurple10,
-            tagBackgroundActive: palette.blauBlueSecondary10,
+            tagBackgroundActive: palette.blauBluePrimary20,
             tagBackgroundInactive: palette.grey1,
-            tagBackgroundInfo: palette.blauBlueSecondary10,
+            tagBackgroundInfo: palette.blauBluePrimary20,
             tagBackgroundSuccess: palette.blauGreen10,
             tagBackgroundWarning: palette.blauYellow10,
             tagBackgroundError: palette.blauRed10,
             tagTextPromoInverse: palette.blauPurple,
-            tagTextActiveInverse: palette.blauBluePrimary,
+            tagTextActiveInverse: palette.blauBlueSecondary,
             tagTextInactiveInverse: palette.grey5,
-            tagTextInfoInverse: palette.blauBluePrimary,
+            tagTextInfoInverse: palette.blauBlueSecondary,
             tagTextSuccessInverse: palette.blauGreen70,
             tagTextWarningInverse: palette.blauYellow70,
             tagTextErrorInverse: palette.blauRed70,
             tagBackgroundPromoInverse: palette.blauPurple10,
-            tagBackgroundActiveInverse: palette.blauBlueSecondary10,
+            tagBackgroundActiveInverse: palette.blauBluePrimary20,
             tagBackgroundInactiveInverse: palette.grey1,
-            tagBackgroundInfoInverse: palette.blauBlueSecondary10,
+            tagBackgroundInfoInverse: palette.blauBluePrimary20,
             tagBackgroundSuccessInverse: palette.blauGreen10,
             tagBackgroundWarningInverse: palette.blauYellow10,
             tagBackgroundErrorInverse: palette.blauRed10,
@@ -228,13 +230,13 @@ export const getBlauSkin: GetKnownSkin = () => {
             buttonDangerBackground: palette.blauRed,
             buttonDangerBackgroundPressed: palette.blauRed70,
             buttonDangerBackgroundHover: palette.blauRed70,
-            buttonLinkDangerBackgroundPressed: applyAlpha(palette.blauPurple, 0.3),
+            buttonLinkDangerBackgroundPressed: applyAlpha(palette.blauRed, 0.3),
             buttonLinkDangerBackgroundInverse: applyAlpha(palette.white, 0),
             buttonLinkDangerBackgroundInversePressed: applyAlpha(palette.blauPurple, 0.3),
             buttonLinkBackgroundPressed: applyAlpha(palette.blauPurple, 0.3),
             buttonLinkBackgroundInversePressed: applyAlpha(palette.blauPurple, 0.3),
             buttonPrimaryBackground: palette.blauBlueSecondary,
-            buttonPrimaryBackgroundInverse: palette.blauBluePrimary,
+            buttonPrimaryBackgroundInverse: palette.blauBlueSecondary,
             buttonPrimaryBackgroundPressed: palette.blauBlueSecondary60,
             buttonPrimaryBackgroundHover: palette.blauBlueSecondary60,
             buttonPrimaryBackgroundInversePressed: palette.blauBlueSecondary60,
@@ -255,25 +257,25 @@ export const getBlauSkin: GetKnownSkin = () => {
             textButtonSecondaryInversePressed: palette.grey2,
             textLink: palette.blauPurple30,
             textLinkInverse: palette.blauPurple30,
-            textLinkDanger: palette.blauRed,
+            textLinkDanger: palette.blauRed40,
             textLinkSnackbar: palette.blauPurple30,
-            textActivated: palette.blauBlueSecondary,
+            textActivated: palette.blauBluePrimary,
             textBrand: palette.blauBluePrimary,
-            inputBorder: palette.grey5,
-            control: palette.darkModeGrey6,
+            inputBorder: palette.darkModeGrey5,
+            control: palette.grey4,
             controlActivated: palette.blauBlueSecondary,
-            controlInverse: palette.darkModeGrey6,
+            controlInverse: palette.grey5,
             controlActivatedInverse: palette.blauBlueSecondary,
             controlError: palette.blauRed,
-            barTrack: palette.darkModeGrey6,
-            barTrackInverse: palette.darkModeGrey6,
+            barTrack: palette.grey5,
+            barTrackInverse: palette.grey5,
             loadingBar: palette.blauBluePrimary,
-            loadingBarBackground: palette.darkModeGrey,
-            toggleAndroidInactive: palette.grey5,
-            toggleAndroidBackgroundActive: palette.blauBlueSecondary30,
+            loadingBarBackground: palette.grey5,
+            toggleAndroidInactive: palette.grey3,
+            toggleAndroidBackgroundActive: palette.blauBluePrimary30,
             iosControlKnob: palette.grey2,
             controlKnobInverse: palette.grey2,
-            divider: applyAlpha(palette.white, 0.05),
+            divider: applyAlpha(palette.white, 0.09),
             dividerInverse: applyAlpha(palette.white, 0.05),
             navigationBarDivider: palette.darkModeBlack,
             badge: palette.blauRed,
@@ -283,8 +285,8 @@ export const getBlauSkin: GetKnownSkin = () => {
             brandHigh: applyAlpha(palette.white, 0.05),
             inverse: palette.grey2,
             neutralHigh: palette.grey2,
-            neutralMedium: palette.grey5,
-            neutralMediumInverse: palette.grey5,
+            neutralMedium: palette.grey4,
+            neutralMediumInverse: palette.grey4,
             neutralLow: palette.darkModeGrey6,
             neutralLowAlternative: palette.darkModeGrey6,
             textPrimary: palette.grey2,
@@ -320,7 +322,7 @@ export const getBlauSkin: GetKnownSkin = () => {
             customTabsBackground: palette.darkModeBlack,
             tagTextPromo: palette.blauPurple30,
             tagTextActive: palette.blauBluePrimary,
-            tagTextInactive: palette.grey5,
+            tagTextInactive: palette.grey4,
             tagTextInfo: palette.blauBluePrimary,
             tagTextSuccess: palette.blauGreen30,
             tagTextWarning: palette.blauYellow40,
@@ -334,7 +336,7 @@ export const getBlauSkin: GetKnownSkin = () => {
             tagBackgroundError: palette.darkModeGrey6,
             tagTextPromoInverse: palette.blauPurple30,
             tagTextActiveInverse: palette.blauBluePrimary,
-            tagTextInactiveInverse: palette.grey5,
+            tagTextInactiveInverse: palette.grey4,
             tagTextInfoInverse: palette.blauBluePrimary,
             tagTextSuccessInverse: palette.blauGreen30,
             tagTextWarningInverse: palette.blauYellow40,