diff --git a/package-lock.json b/package-lock.json
index d0e8a35b..d9272f7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@civicactions/cmsds-open-data-components",
-      "version": "2.2.0",
+      "version": "2.2.1",
       "license": "GPL-3.0",
       "dependencies": {
         "@popperjs/core": "^2.11.6",
diff --git a/package.json b/package.json
index 78300e94..2440cf78 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "dist/main.js",
   "source": "src/index.ts",
diff --git a/src/components/ApiDocumentation/index.jsx b/src/components/ApiDocumentation/index.jsx
index 88c0019a..4668d39c 100644
--- a/src/components/ApiDocumentation/index.jsx
+++ b/src/components/ApiDocumentation/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import SwaggerUI from 'swagger-ui-react';
 import 'swagger-ui-react/swagger-ui.css';
+import '../../templates/APIPage/swagger-ui-overrides.scss';
 
 const ApiDocumentation = ({ endpoint }) => {
   return (
diff --git a/src/templates/APIPage/APIPage.jsx b/src/templates/APIPage/APIPage.jsx
index e3c54c9b..4c087415 100644
--- a/src/templates/APIPage/APIPage.jsx
+++ b/src/templates/APIPage/APIPage.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import qs from 'qs';
 import SwaggerUI from 'swagger-ui-react';
 import 'swagger-ui-react/swagger-ui.css';
+import './swagger-ui-overrides.scss';
 
 const APIPage = ({ hideAuth, additionalParams, rootUrl }) => {
   const hasACA = additionalParams && additionalParams.ACA ? true : false;
diff --git a/src/templates/APIPage/swagger-ui-overrides.scss b/src/templates/APIPage/swagger-ui-overrides.scss
new file mode 100644
index 00000000..9bdc4d63
--- /dev/null
+++ b/src/templates/APIPage/swagger-ui-overrides.scss
@@ -0,0 +1,87 @@
+/*
+This document provides overrides to Swagger UI, fixing accessibility issues.
+*/
+
+:root {
+  //Colors
+  --su-color--blue-dark: rgb(0, 51, 102);
+  --su-color--brown: rgba(136, 76, 0, 1);
+  --su-color--green-dark: rgb(0, 118, 65);
+  --su-color--green-muted: rgb(39, 117, 100);
+  --su-color--orange-dark: rgb(209, 0, 0);
+  --su-color--orange-light: rgba(209, 0, 0, .1);
+  --su-color--red-dark: rgb(151, 0, 0);
+  --su-color--red-light: rgba(211, 0, 0, .1);
+  --su-color--red: rgb(211, 0, 0);
+}
+
+// State  `.swagger-ui` twice to include specificity and avoid multiple `!important` statements;
+.swagger-ui.swagger-ui {
+  .opblock {
+    .opblock-summary-method {
+      color: #333;
+    }
+
+    &.opblock-delete {
+      background-color: var(--su-color--red-light);
+      border-color: var(--su-color--red);
+
+      .opblock-summary-method {
+        color: white;
+
+        background-color: var(--su-color--red-dark);
+      }
+    }
+
+    &.opblock-put {
+      .opblock-summary-method {
+        background-color: var(--su-color--brown);
+        color: white;
+      }
+    }
+  }
+
+  .parameter__name {
+    &.required {
+      span {
+        color: var(--su-color--red);
+      }
+
+      &:after {
+        color: var(--su-color--red);
+      }
+    }
+  }
+
+  .btn {
+    &.cancel {
+      border-color: var(--su-color--red);
+      color: var(--su-color--red);
+    }
+
+    &.authorize {
+      border-color: var(--su-color--green-muted);
+      background-color: var(--su-color--green-muted);
+    }
+
+    &.execute {
+      background-color: var(--su-color--blue-dark)
+    }
+  }
+
+  .info {
+    .title {
+      small {
+        background-color: #666;
+
+        &.version-stamp {
+          background-color: #005830;
+        }
+      }
+    }
+
+    a {
+      color: #036;
+    }
+  }
+}