[GA11YFIX-405] Update editor border color to meet WCAG color contrast minimum (3:1)

Author: jgorfine-zendesk

.changeset/stale-planes-dig.md

@@ -0,0 +1,5 @@
+---
+"@zendesk/help-center-wysiwyg": minor
+---
+
+Changed --ck-color-base-border to a color that meets color contrast minimum requirement in WCAG 2.2 (3:1)

src/styles.css

@@ -15,7 +15,7 @@
 
   /* foundational colors */
   --ck-color-text: var(--zd-color-grey-900);
-  --ck-color-base-border: #d8dcde;
+  --ck-color-base-border: var(--zd-color-grey-600);
   --ck-color-focus-border: var(--zd-color-grey-700);
 
   /* focus style/color overrides (in favor of custom :focus-visible styles) */
@@ -98,6 +98,11 @@ a.ck.ck-button:focus {
   border-color: transparent;
 }
 
+/* Toolbar separators can keep on being very light because they're "non-essential" graphics, according to WCAG */
+.ck.ck-toolbar .ck.ck-toolbar__separator {
+  background: var(--zd-color-grey-300);
+}
+
 .ck.ck-button:focus-visible,
 .ck.ck-toolbar:focus-visible,
 .ck.ck-content.ck-editor__editable.ck-focused,