diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 65a4a85b49..a778a13cff 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -49,7 +49,7 @@
 
       .form-control-color {
         @include form-validation-state-selector($state) {
-          width: add($form-color-width, $input-height-inner);
+          width: calc($form-color-width + $form-feedback-icon-size + .8125rem); // stylelint-disable-line function-disallowed-list
         }
       }
     }
diff --git a/site/content/docs/5.3/forms/validation.md b/site/content/docs/5.3/forms/validation.md
index 3ea668e40b..b4127749ec 100644
--- a/site/content/docs/5.3/forms/validation.md
+++ b/site/content/docs/5.3/forms/validation.md
@@ -11,6 +11,14 @@ extra_js:
     async: true
 ---
 
+## Form color validation test
+
+<div class="d-flex gap-2 flex-column border border-tertiary p-3">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color">
+  <input type="color" class="form-control form-control-color is-valid" value="#a885d8" title="Choose your color">
+  <div><input type="color" class="form-control form-control-color is-invalid" value="#a885d8" title="Choose your color"><p class="mb-0 invalid-feedback">Invalid feedback</p></div>
+</div>
+
 {{< callout warning >}}
 We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we'd recommend either using the server-side option or the default browser validation method.
 {{< /callout >}}